Angular-CLI Sass

8
votes

I am using the newest version of Angular-CLI to create an Angular2 project. I have a sass file with variables in src/assets/styles/_vars.scss. Is it possible to configure the sass compiler so I only have to write 

@import "vars";

Instead of writing out the full path or relative path?

2
angularsassangular-cli

2 Answers

21
votes

You're in luck. See this pr.

As an example when using sass, you'd be looking to add a stylePreprocessorOptions object to your app config within angular-cli.json. For example:

"apps": [
    {
        "stylePreprocessorOptions": {
            "includePaths": [
                "styles" // This would point to the `my-app/src/styles` directory
            ]
        }
    }
]

From here, if you had a scss file such as my-app/src/styles/_vars.scss, you can then

@import 'vars'

across your apps scss files.

Just remember to update angular-cli to at least 1.0.0-beta.26.

0
votes

Using stylePreprocessorOptions is an option and I believe this was an old workaround / feature.

Now you can just use the tilde ~ symbol like this:

@import '~variables';

I wouldn't import _underscore-files but rather have one entrypoint which makes a possible further inner structure available in one file, think of mixins, fonts, colors...

So in your case it would be something like this:

@import '~assets/styles/main.scss';