在 Angular 7+ 项目中同时使用 Sass (Scss) 和 Less答案

【问题标题】：Using both Sass (Scss) and Less in an Angular 7+ project在 Angular 7+ 项目中同时使用 Sass (Scss) 和 Less
【发布时间】：2019-07-28 09:00:23
【问题描述】：

创建项目并指定 CSS 预处理器很简单

ng new my-app --style=scss
          ... --style=sass
          ... --style=less

也为现有项目设置默认值

ng config schematics.@schematics/angular:component.styleext scss
                                                        ... sass
                                                        ... less

但是如果我想同时使用 Sass 和 Less 怎么办？
这可能吗？

我想同时集成使用Less 的Ng-zorro 和使用Sass 进行自定义的Clarity。

【问题讨论】：

标签： angular sass less angular-cli

【解决方案1】：

通过设置默认的 CSS 扩展名，您只需说明运行时应该创建的内容

ng g component test

然后组件将具有您配置的扩展名的样式文件。

无论如何，这并不意味着你不能同时使用。

只需将生成文件的扩展名改为.less，并在组件中修改引用即可。

styleUrls: ['./test.component.less'],

甚至保留两个文件：

styleUrls: ['./test.component.less', './test.component.scss'],

所以，您现在有一个样式文件为less。

最终，您可以在项目中混合所有可能的 CSS 方言。

【讨论】：

谢谢！所以基本上 Angular 已经具备了 Sass 和 Less 所需要的所有东西。我会在您的回答中补充说，由于“缺少绑定”，可能需要运行 npm rebuild node-sass
@LppEdd 可能是。但是，也可能是因为您安装了 @angular/cli，最新的 sass 二进制文件已被更改。这通常是一个不同的问题，可能你没有遇到这个问题，因为你没有使用 sass 并且问题甚至不会出现
你说得对，我在一个没有设置预处理器的新项目中测试了你的建议。

【解决方案2】：

也许有一点补充：这也适用于全球。

angular.json:

  "architect": {
    "build": {
     ..
      "options": {
       ..
        "styles": [
          "src/styles.less",
          "src/styles.scss"
        ]

无论您使用什么方言，这两个文件都将被使用。

【讨论】：