SCSS Import Relative to Root

Question

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

Answer 1

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)

Answer 2

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"
                ]
            },
            ...
        }
    ]
}

Answer 3

• 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'.

Answer 4

The definition of paths depends on your version of Angular. In our project, old versions use angular-cli.json and new ones use angular.json:

for "@angular/cli": "~1.7.4" use angular-cli.json:

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

for "@angular/cli": "~7.0.6":

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

Answer 5

You can use {} to reference the top level of the project path when using meteor-scss, hence something like that will work.

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

You can also use the tilda operator ~ If using webpack (or angular-cli), accessing libraries under node_modules as per the following -- Credit to @splintor

@import "~module-name/stylesheet";