Angular-cli: Angular CLI 6.0.0 support for stylePreprocessorOptions

[Ismaestro]

Versions

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.0-rc.6
Node: 8.9.1
OS: darwin x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.8
@angular-devkit/build-angular     0.5.8
@angular-devkit/build-optimizer   0.5.8
@angular-devkit/core              0.5.8
@angular-devkit/schematics        0.5.8
@angular/cdk                      5.2.4
@angular/cli                      6.0.0-rc.6
@angular/flex-layout              5.0.0-beta.14
@angular/material                 5.2.4
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.6
@schematics/angular               0.5.8
@schematics/update                0.5.8
rxjs                              5.5.10
typescript                        2.6.2
webpack                           4.6.0

Repro steps

• Clone this.
• Old .angular_cli.json

...
      "scripts": [
        ....
      ],
      "stylePreprocessorOptions": { <---- !!!!!!
        "includePaths": [
          "../src/styles/"
        ]
      },
      "environmentSource": "environments/environment.ts",
...

• Update CLI to 6.0.0-rc.6. Run ng update and then ng update @angular/cli --migrate-only --from=1
• Run npm start

Observed behavior

ERROR in Module build failed: 
@import "mixins";
^
      File to import not found or unreadable: mixins.

Desired behavior

Support for stylePreprocessorOptions or fix ng update because it removes that part from angular.json file.

[lehoffma]

stylePreprocessorOptions is still supported. You will have to manually update the newly generated angular.json though. Its new place is inside the "options" block of the json.
An example config could look like this:

"options": {
    "outputPath": "../webapp",
    "index": "src/index.html",
    "main": "src/main.ts",
    "tsConfig": "src/tsconfig.app.json",
    "polyfills": "src/polyfills.ts",
    "assets": [
        {
            "glob": "**/*",
            "input": "src/resources",
            "output": "/resources"
        },
    ],
    "styles": [
        "src/styles.scss"
    ],
    "stylePreprocessorOptions": {
        "includePaths": [
            "src/styles"
        ]
    },
    "scripts": []
}

Note the changed path.

I agree that it would be nice if ng update did this automatically.

[Ismaestro]

Thanks @lehoffma !

I already tried that but I failed using a wrong path ("src/styles") instead of "../src/styles/". Anyway, yeah it could be automatically...

[MickL]

Following is working:

"stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
},

But I found a bug:
If scss file is called _globals.scss Webpack(?) tries to import node_modules/globals/index.js instead of src/styles/_globals.scss. Issue: https://github.com/angular/angular-cli/issues/10535

[hudsontavares]

One thing I found by myself and that can prevent a lot of headache:

For tests running, you must include the same stylePreprocessorOptions from projects.yourProjectName.architect.build.options into projects.YourProjectName.test.options, otherwise the same error will appear.

I was wondering whether it is a bug or the expected behaviour there.

[dethstrobe]

I'm having trouble where my tests can't find my sass imports. It's a pretty simple

@import '~styles/style-importer';

And my angular.json looks like this for testing

                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": ["src/styles/styles.scss"],
                        "scripts": [],
                        "assets": ["src/assets"],
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "src/environments/dev",
                                "src/styles"
                            ]
                        }
                    }
                },

the build part of the angular.json works fine for localhost and looks like this

                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "build",
                        "main": "src/main.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "serviceWorker": false,
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "src/environments/dev",
                                "src/styles"
                            ]
                        },
                        "index": "src/index.html",
                        "assets": [{
                            "glob": "**/*",
                            "input": "src/assets",
                            "output": "assets"
                        }],
                        "styles": ["src/styles/styles.scss"],
                        "scripts": [],
                        "polyfills": "src/polyfills.ts"
                    },
                    "configurations": {}
                },

Not sure why the stylePreprocessorOptions works for the localhost but not the tests.

[Ismaestro]

@dethstrobe That seems fine, compare the hole file to this one. Maybe you find something wrong...

[clydin]

Try an import similar to the following: @import 'style-importer';

[dethstrobe]

Thanks @clydin,

That did the trick. Guess I just misunderstood how the import syntax was working.

[AlexanderKozhevin]

I still have a problem.

"stylePreprocessorOptions": {
              "includePaths": [
                "src/scss"
              ]
            },

  File to import not found or unreadable: ~scss/table.
      in /Users/alexanderkozhevin/Desktop/virtus/portalFrontend/src/app/pages/system/components/market-params/market-params.component.scss (line 1, column 1)
ERROR in ./src/app/pages/system/system.component.scss
Module build failed: 
@import "~scss/table";

[ArvindNarayanCognitive]

this worked out for me in angular cli 6, angular 6.0

"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true,
"stylePreprocessorOptions": {
"includePaths": [
"./src/scss/"
]
}
}
}
},

[ilwebdifabio]

It works fine also with universal

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json",
            "stylePreprocessorOptions": {
                  "includePaths": [
                      "src/theme"
                  ]
              }
          }
        }

[ovione]

For me trying to use stylePreprocessorOptions in a multiproject doesn't work (
my multiproject is called bootstrap4xSass.

In my angular.json I have in bootstrap4xSass/architect/build/options

            "scripts": [],
            "stylePreprocessorOptions": {
              "includePaths": [
                "projects/bootstrap4xSass/src/scss"
              ]
            }

In my project I have

\projects \bootstrap4xSass \src \scss _variables.scss

In a component scss of my 'bootstrap4xSass' project I have

@import '~variables';

and the error I have is:

ERROR in ./src/app/forms-test/forms-test.component.scss Module build failed: @import '~variables'; ^ File to import not found or unreadable: ~variables. in C:\wksp\work\angular-libs\newlibsv6\angular-libraries-v6\projects\bootstrap4xSass\src\app\forms-test\forms-test.component.scss (line 3, column 1)

That means that this approach doesn't work in a multi project

[krekhovetskyi]

Works fine Angular CLI: 6.1.2, Angular: 6.1.1

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],
"scripts": [],
"stylePreprocessorOptions": {
  "includePaths": [
    "src/scss"
  ]
},

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}