Changes in @import'ed less files aren't output on recompile

[thomaslundstrom]

Versions

C:\src\tmp\less-build-repro\node_modules\@angular\cli\bin\ng    
                                                                
     _                      _                 ____ _     ___    
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|   
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |    
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |    
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|   
                |___/                                           
                                                                
                                                                
Angular CLI: 6.0.3                                              
Node: 8.9.4                                                     
OS: win32 x64                                                   
Angular: 6.0.2                                                  
... animations, common, compiler, compiler-cli, core, forms     
... http, language-service, platform-browser                    
... platform-browser-dynamic, router                            
                                                                
Package                           Version                       
-----------------------------------------------------------     
@angular-devkit/architect         0.6.3                         
@angular-devkit/build-angular     0.6.3                         
@angular-devkit/build-optimizer   0.6.3                         
@angular-devkit/core              0.6.3                         
@angular-devkit/schematics        0.6.3                         
@angular/cli                      6.0.3                         
@ngtools/webpack                  6.0.3                         
@schematics/angular               0.6.3                         
@schematics/update                0.6.3                         
rxjs                              6.1.0                         
typescript                        2.7.2                         
webpack                           4.8.3                         

Repro steps

• Generate a new angular project (I used npx @angular/cli new less-build-repro --skip-tests=true --style=less)
• Add an @import from the src/styles.less to another file
• Run ng serve and start a browser
• Change something in the imported file, like add a background-color
• Notice that the change doesn't appear in the browser

More detailed repro steps (and a sample solution) are in this repository: https://github.com/thomaslundstrom/less-build-repro

Observed behavior

It seems like the build notices that a file is changed, but the new stuff isn't output. The build starts, but the log says 5 unchanged chunks and the hash doesn't change.

Desired behavior

Style changes should be output and visible in the browser.

Mention any other details that might be useful (optional)

I run windows 10. I haven't tried reproducing on any other platforms.

[thomaslundstrom]

Update: a colleague using the latest Mac OS has the same observed behavior.

[thomaslundstrom]

Could this issue be an effect of this issue in less-loader: webpack-contrib/less-loader#252 ?

[filipesilva]

Yeah that seems to be the issue, I'm following it for now to see what comes of it.

[ramunsk]

webpack-contrib/less-loader#252 (comment)

[zbuhler]

In my project adding less: "2.7.3" to my package.json and installing with yarn fixed it. There seems to be some combination of the loader and the version of less that affects this. For some people downgrading the loader but keeping their version of less worked and for some (like me) downgrading less but keeping the version of the loader works. However, an oddity I discovered when creating a newly generated Angular CLI project and trying this out things worked fine. So I'm not sure how to account for that since my actual project had similar dependencies.

As it currently stands Angular CLI comes with this in its package.json-

"less": "^3.0.4",
"less-loader": "^4.1.0",

Why, for me, using less: "2.7.3" while keeping the Angular CLI default of "less-loader": "^4.1.0" works I'm not totally sure.