How to Import sass files in angular 6

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;

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