1

I'm new to Bootstrap and SASS, so I'm hoping to get some info on how to configure it correctly and get started.

I have a (relatively) new Angular project created in Visual Studio 2019. Bootstrap is defined in package.json as follows:

"bootstrap": "^4.4.1",

so I was under the impression that I'll get the SASS stuff out of the box. Whenever I generate a component with "ng generate", a SASS file is also created, but when I try adding a simple class to the file, like so:

.nav-link {
  width: 40px;
  height: 40px;
}

it's not recognized and I get the following error:

Failed to compile.

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Expected newline.

... primary-nav\primary-nav.component.sass 1:11 root stylesheet

I realize that I'm missing configurations (?), and also - I'm confused as to what I'm supposed to use? SASS extension files? SCSS extension? Isn't SCSS just a "syntax to use SASS"?

I tried searching for similar questions/articles but didn't find a comprehensive explanation on how to get started and configure everything in this type of project.

any help (and/or pointing in the right direction) will be greatly appreciated. thank you!

EDIT - solution(s):

  1. needed to install npm i node-sass
  2. in angular.json had to change this:

"schematics": {

"@schematics/angular:component": {

  ...
  "style": "sass"

},

to this:

"style": "scss"
  1. changed extension of existing file(s) to .scss
webpassion101
  • 68
  • 6
  • Can you run `npm rebuild node-sass` or `npm i node-sass` and try again? – eko Jul 15 '20 at 07:51
  • @eko thank you so much! I think the install worked, because - well - there was an installation :) and now there's a different error: "SassError: Invalid CSS after ".nav-link {": expected "}", was "{" on line 1 of ... \primary-nav\primary-nav.component.sass" – webpassion101 Jul 15 '20 at 08:19
  • Try using scss, because classic sass doesn't use { and } – Dalibor Jul 15 '20 at 08:32
  • https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass see the answer by simhumileco – Dalibor Jul 15 '20 at 08:33
  • @webpassion101 Can you try renaming the file to `scss` (as Dalibor also mentioned)? – eko Jul 15 '20 at 08:35
  • 1
    @Dalibor @eko works now!! thank you SO MUCH guys. renamed the file to `scss`, added `"styleext": "scss"` and `"style": "scss"` (one of those is probably unnecessary, I'm guessing) and now it works. thanks for the help and @Dalibor for the link to explanation about sass vs scss, that's very helpful. – webpassion101 Jul 15 '20 at 09:01

1 Answers1

1

Check that you have in angular.json:

  "schematics": {
    "@schematics/angular:component": {
      ...
      "styleext": "scss"
    },

and in package-lock.json:

"dependencies": {
    ...
    "@angular-devkit/build-angular": {
        ...
        "requires": {
            ....    
            "node-sass": "4.10.0",
            "sass-loader": "7.1.0",
...     
"node-sass": {
...
},
"sass-graph": {
...
},    
"sass-loader": {
...
}

The versions are just for example, I just wrote how my config looks regarding SASS

Dalibor
  • 1,430
  • 18
  • 42
  • 1
    thank you @Dalibor! after installing node-sass, I have **1)** in angular.json: `"style": "sass"`, should I add `"styleext": "scss"` (in addition / instead??) and **2)** in package-lock.json in build-angular -> requires -> **sass** and **sass-loader** (not **node-sass**) does that make sense? – webpassion101 Jul 15 '20 at 08:40
  • webpassion101 Angular 8.0, new version uses dart-sass instead of node-sass. – VISHMAY Aug 12 '20 at 03:39