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

Intermingle

Please, post the directory structure if possible. – Unexpected

@Unexpected check it just a new angular starter app nothing special – Intermingle

Try renaming src/styles.css to src/styles.scss and in that file include the other styles in your src/sass directory. If you like check out this GitHub project of mine in which I do what you are trying to do now. Notice that in the angular.json file a i set "styles": [ "src/styles.scss" ], – Unexpected

@Unexpected I added all other i can import all this stuf to styles.css, how about in a component? – Intermingle

I understand. See the answer I posted. – Unexpected

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;

Conan

Worked like charm!! Thank you so much – Vellicate

you are amazing – Capparidaceous

Is this updated for Angualr 7? I don't know exactly in what "options" section to put it (build? server? test? all?) – Abrogate

@Abrogate inside projects.<youproject>.architect.build.options – Frogman

My problem was specific to building an Angular Universal app. After using ng add @nguniversal/express-engine --clientProject MYPROJECT in an existing project, then running npm run build:ssr I got the import error. Solution was to add "stylePreprocessorOptions": { "includePaths": [ "src/<myStylesFolder>" ] }, to the options sections of the newly added server definition. NO OTHER CHANGE NEEDED. – Orth

You are amazing. Thank you so much!!! – Hanaper

I get Undefined mixin when using this still. I import my mixin into the global styles.scss file and I @include in a specific component. That component fails be it can't find the mixin even though variables work in the component. – Gerous

Trying to do this in an angular library, not application. There is no architect -> build -> options path. How do I do this in a library? – Trite

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

Intermingle

Now I'm confused about this. ~ is supposed to refers to the node_modules folder. – Unexpected

this angular cli v6 is quite different check it out – Intermingle

Thank you very much. Most articles on the internet are based on the older version of Angular and they weren't working. Thanks so much for this – Schematism

this is not entirely correct. using ~will asume that it is node_modules folder. If you have another folder outside src, @Andy Braham solution is correct – Capparidaceous

This really helped me, because I needed to use an absolute path inside a font source using url(). I already had the stylePreprocessorOptions set up, and it wasn't working inside url(). Using the ~src/ prefix instead sorted everything! – Calica

Answer 3

For those searching an updated answer for Angular 13 with Angular CLI: 13.1.2 you will need to add in your angular.json file:

In the "architect" --> "build" --> inside "options":

"stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            }

The final result will be something like:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/proyect",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            }
          },

Example for a structure like:

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

Then in your component just use:

@import "mixins";

Walkup

Correct Answer for the updated versions of Angular (13+)! Cheers – Preacher

Answer 4

In case you want to import the breakpoint function of bootstrap into a single component's scss, you can do it like this

@import '~bootstrap/scss/bootstrap-grid.scss';
@include media-breakpoint-up(md) {
    //do something here
}

Yingyingkow