SCSS Import Relative to Root

问题:

I'm in the process refactoring an Angular application and as I'm moving components around to new directory locations, I'm finding that dealing @import paths in the components' SCSS files is getting a bit tedious.

For example, let's say I have the file src/_mixins.scss in the root of my application and the component src/app/my-widget/my-widget.component.scss imports the SCSS like so @import '../../mixins';. All well and good.

But then I decide that my-widget.component is really be a "shared component" under another component my-thingy.component, so I create a shared folder under src/app/my-thingy and move everything that was in src/app/my-widget into it.

I hope you're still with me... So, now I've got src/app/my-thingy/shared/my-widget and I modify my SCSS file to import @import '../../../../mixins'.

Note: This is a simplified example. Some of the paths get relatively deep (no pun intended... or was it?) and all of these . and / are a bit much.

TL;DR

It would be super-handy if from the start I could have just imported _mixins.scss relative to the root in all of my components' SCSS files so I don't have to keep messing with the @import paths when refactoring. (e.g. Something along the lines of @import '~/mixins'). Does something like this exist?

What I've tried (and, sadly, has failed):

1. @import '~/mixins'; /** I had real hope for this one **/
2. @import 'mixins'; /** Just being overly optimistic here **/
3. @import '~//mixins'; /** Now I'm just making stuff up **/

I understand that I'm already going to have to modify my mod files to point to the new path of the component with all of this "moving stuff around", but... hey, one less thing, right?

回答1:

• If you are using Angular CLI, take a look at Global styles, "stylePreprocessorOptions" option specifically.
• For webpack, you can configure includePaths in sassLoader plugin configuration.
• And it's similar for gulp builds, you pass includePaths to the sass plugin.

Whatever your build tool is, sass will treat those paths as root, so you can import them directly, so with:

includePaths: ["anywhere/on/my/disk"]

you can just @import 'styles' instead of @import 'anywhere/on/my/disk/styles'.

回答2:

You can also use {} to reference top level of the project path, hence something like that will work.

@import "{}/node_modules/module-name/stylesheet";

回答3:

The paths of defination depends on your version of Angular. In our project, Old versions uses angular-cli.json and new ones uses angular.json then:

at "@angular/cli": "~1.7.4" use angular-cli.json this path:

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

at "@angular/cli": "~7.0.6", use this:

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

回答4:

solution for angular-cli is to add stylePreprocessorOptions to .angular-cli.json.

{
    "apps": [{
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
                "./app/global-styles"
            ]
        },
        ...
    }]
}

if you use server-side rendering remember to add this for both ssr and main app build - otherwise you will get NodeInvocationException: Prerendering failed because of error: Error: Cannot find module 'C:\Users\...\ClientApp\dist-server\main.bundle.js'

{
    "apps": [{
            ...
            "outDir": "dist",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        },
        {
            ...
            "name": "ssr",
            "outDir": "dist-server",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        }
    ]
}

回答5:

If I've understood the question correctly then using @import 'src/app/...' works correctly.

e.g.

@import 'src/mixins';

Note that there's no leading backslash on the path.

(this is tested on Angular 9)