从 Angular 项目中的 SASS、SCSS 和 Bootstrap 开始答案

【问题标题】：Starting out with SASS, SCSS and Bootstrap in Angular project从 Angular 项目中的 SASS、SCSS 和 Bootstrap 开始
【发布时间】：2020-11-04 15:36:39
【问题描述】：

我是 Bootstrap 和 SASS 的新手，所以我希望获得一些关于如何正确配置并开始使用的信息。

我在 Visual Studio 2019 中创建了一个（相对）新的 Angular 项目。 bootstrap 在 package.json 中定义如下：

"bootstrap": "^4.4.1",

所以我的印象是我会开箱即用 SASS 的东西。每当我使用“ng generate”生成组件时，也会创建一个 SASS 文件，但是当我尝试向文件中添加一个简单的类时，如下所示：

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

无法识别，我收到以下错误：

编译失败。

模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）： SassError：预期换行符。

... primary-nav\primary-nav.component.sass 1:11 根样式表

我意识到我缺少配置 (?)，还有 - 我对我应该使用什么感到困惑？ SASS 扩展文件？ SCSS 扩展？ SCSS 不就是“使用 SASS 的语法”吗？

我尝试搜索类似的问题/文章，但没有找到关于如何开始和配置此类项目中所有内容的全面说明。

任何帮助（和/或指向正确的方向）将不胜感激。谢谢！

编辑 - 解决方案：

需要安装npm i node-sass
在 angular.json 中不得不改变这个：

"schematics": {

"@schematics/angular:component": {

  ...
  "style": "sass"

},

到这里：

"style": "scss"

将现有文件的扩展名更改为.scss

【问题讨论】：

您可以运行npm rebuild node-sass 或npm i node-sass 再试一次吗？
@eko 非常感谢！我认为安装工作，因为 - 嗯 - 有一个安装 :) 现在有一个不同的错误：“SassError: Invalid CSS after ".nav-link {": expected "}", was "{" on line 1 ... \primary-nav\primary-nav.component.sass"
尝试使用scss，因为经典的sass不使用{和}
stackoverflow.com/questions/5654447/… 见 simhumileco 的答案
@Dalibor @eko 现在可以工作了！！十分感谢大家。将文件重命名为scss，添加"styleext": "scss" 和"style": "scss"（其中一个可能是不必要的，我猜）现在它可以工作了。感谢您的帮助和@Dalibor 提供的关于 sass 与 scss 的解释链接，这非常有帮助。

标签： angular bootstrap-4 sass

【解决方案1】：

检查你在 angular.json 中有没有：

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

在 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": {
...
}

版本只是举例，我只是写了关于 SASS 的配置看起来如何

【讨论】：

谢谢@Dalibor！安装 node-sass 后，我在 angular.json 中有 1)："style": "sass"，我应该添加 "styleext": "scss"（另外 / 代替吗？？）和 2)在 build-angular 中的 package-lock.json 中 -> 需要 -> sass 和 sass-loader （不是 node-sass）感觉？
webpassion101 Angular 8.0，新版本使用 dart-sass 代替 node-sass。