Not compiling `@import` changes

[johnstew]

Hi all,

So I am experiencing an issue where less-loader is not compiling any changes to my @imported files. It appears to work for the root file but does not update for any of the @imported ones.

I create a project to repro this. Webpack Less Loader Test

If you clone down, npm i, and then ./node_modules/.bin/webpack --watch it will perform the initial compile just fine. But once an update is made to the imported file it will say it does something in the console but if you check the output of the file, the change is not reflected.

Hoping this is something small I am missing. Here are versions of everything.

Node --> 8.9.0
NPM --> 5.5.1
OS --> Mac OSX 10.11.6

Deps:

"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"webpack": "^3.11.0",
"webpack-dev-server": "^3.1.1"

Thanks!

[lcxfs1991]

I guess you are missing style-loader

[johnstew]

I'm not sure it's that because I specifically want to generate a new file each time a change is made. I'm not injecting any styles in the head of a page or anything like that.

To give more context I was trying to use the webpack-dev-server as a stand alone static asset server that another app I have can just reference.

Everything works great in terms of JS picking up changes but it seems that there is some sort of caching or something else going on for subsequent file changes when using the less-loader.

[RonnieSan]

I'm having the same issue. It watches the files and recompiles, but none of the changes appear in the final css.

[ryanrobison]

Same thing is happening to me. It watches the files, recompiles, but none of the changes appear.

[ramunsk]

For me npm install --save-dev less-loader@3.0.0 as a temporary workaround did the trick.
Some LESS features will be lost for sure. One of those noticed immediately is you have to specify full file name in @import:

@import 'file' // <-- does not work
@import 'file.less" // <-- works

[RonnieSan]

One thing that I discovered is that if you are using the paths option for less-loader, it will use the less resolver instead of the webpack resolver which won't work with hot reloading. I removed the paths option and my styles started hot reloading.

[zhhb]

not works yet while use less-loader is 4.x;
I just change it to ^3.0.0 it works

[vincentjames501]

+1

[alexfaber2011]

+1

[maxim1006]

+1

[alexander-akait]

Please don't spam, fell free to investigate and send PR with fix

[johnstew]

I just downloaded my original repo and tried it and it works ¯_(ツ)_/¯

[manulasnier]

hello,
I have the same issue with the same configuration in Angular 6 project.. I can't retrograde to less-loader 3.x.x version because i have a lot of conflicts and errors...

[hq229075284]

I think this is an issue with less,rather than less-loader.I returned less to 2.7.3,and less-loader still 4.1.0,it works normally.But if i use less@3.0.4,it doesn't update style when i change the file of less.