How to Import sass files in angular 6

Question

I created new angular project with sass, and I created folder with name sass which contain a file named _variables.scss,

in app component I tried to import variables like this.

@import 'variables'

when I run ng serve i get the following error:

./src/app/app.component.scss Module build failed:

@import 'variables'
^
      File to import not found or unreadable: variables.
      in C:UsersBongeDocumentsProjectsmovies_databasemovies-clientsrcappapp.component.scss (line 1, column 1)

Note I added the following to angular.json:

"stylePreprocessorOptions": { "includePaths": [ "src/", "src/sass/" ]

Directory structure just a angular starter app:

|- src/
    |- sass/
        |- _variables.scss
        |- _mixins.scss
        |- styles.scss

still i get the same error: what am I doing wrong here? any help

question from:https://stackoverflow.com/questions/50878691/how-to-import-sass-files-in-angular-6

Answer 1

I realize this is an older question, but keeps coming up in searches so I figure an update is in order. There is a way to define your own import paths for SASS like node_modules libraries, all you need to do is make a stylePreprocessorOptions entry in the options section of the angular.json file. You do not need to include everything using srcsass

angular.json

"options": {
  "outputPath": "dist/App",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "src/tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "src/sass/styles.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": [
      "src/sass"
    ]
  },
  "scripts": []
},

Then in your styles you can simply import them using

styles.sass

Note: Don't include the file extension or an initial ~.

@import 'variables'; // Imports from src/sass
@import 'mixins;