CODEWITHSUNDEEP
angulartypescriptsassconfiguration
Nguyen Phong Thien
Nguyen Phong Thien

Reputation: 3387

Shorten SCSS import path in Angular 7

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?

Upvotes: 3

Views: 2130

Answers (1)

Manoj
Manoj

Reputation: 5867

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.

Upvotes: 7

Related Questions