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

Question

创建项目并指定 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。

Answer 1

通过设置默认的 CSS 扩展名，您只需说明运行

时应该创建什么

ng g component test

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

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

只需将生成的文件的扩展名更改为.less并适配组件中的引用即可。

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

甚至保留两个文件：

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

因此，您现在有一个样式文件 less。

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

Answer 2

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

angular.json:

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

无论您使用何种方言，这两个文件都会被使用。

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

Using both Sass (Scss) and Less in an Angular 7+ project

sass

less

angular-cli

angular