Angular 4 + SASS path mapping

2
votes

I was wondering if there is anyway to add path mapping for SASS files in Angular 4? What I mean is, lets say I have global scss files stored in src/assets/styles and I would like to access these files in my component scss files which are stored in src/app/component/{component-name}/{component-name}.component.scss. Currently I have to do:

@import "../../../assets/styles/{file-needed}.scss";

When I would like to be able to do something like:

@import "~assets/styles/{file-needed}.scss";

I know the ~ will go to the node_modules dir, that's just an example. Is there anyway to create a shortcut for these kind of things?

Many thanks in advance!

2
angularsass

2 Answers

6
votes

I found the answer. You can add "stylePreprocessorOptions" to the angular-cli.json app object to include any path in your scss compilation. Source is here.

1
votes

update 2019

In Angular 6 and newer, in angular.json

"projects": {
    "projectName": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules",
                "src/app/styles",
                "some/other/path/to/scss"
              ]
            },
            ...