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:\Users\Bonge\Documents\Projects\movies_database\movies-client\src\app\app.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

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 src\sass

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; 

Answer 2

In the new angular v6, importing sass files is a little different from the previous version.

I just needed to import like this (in a component stylesheet)

@import "~src/sass/variables";    // note: without file extension 

Now everything works fine

Thanks all for the help