Shorten SCSS import path in Angular 7

Question

When I created a component, which is nested in a deep level, and if I want to import a shared .scss, I have to import it with a long path, likes:

@import '../../../app.shared.scss';

That doesn't happen with the .ts file, as I can config in tsconfig.json

"paths": {
    "*": [
        "src/*",
        "src/app/*",
    ]
},

then instead of import the full path in Typescript

import { AppService } from '../../../app.shared';

I can do it a lot simpler

import { AppService } from 'app.shared';

Is there any possible way to do the same with scss importation?

score 6 · Accepted Answer · answered Feb 13 '19 at 14:21

Try this in angular-cli.json under options. Here a/b are folder.

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

If test.scss file is inside folder b, you can write @import 'test' in your scss file.

1 Answers1