时间戳

首页 > 解决方案 > Starting out with SASS, SCSS and Bootstrap in Angular project

angular - Starting out with SASS, SCSS and Bootstrap in Angular project

问题描述

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

标签： angularbootstrap-4sass

解决方案

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

推荐阅读