在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怎么办？
这可能吗？

我想这两个结合Ng-zorro，即用Less，以及Clarity，它使用Sass了自定义。

Answer 1

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

ng g component test

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

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

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

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

甚至保留两个文件：

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

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

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