Question

我知道可以在同一个项目中使用css和sass / scss。我已经看过一个问这个问题的SO问题，但是从我看到的内容中，当在angular_cli.json文件中使用css作为styleExt时，会出现很多警告。

这样做是否值得推荐？
我应该将所有.css文件重命名为sass / scss吗？
什么是最好的scss / sass，我的猜测是scss？
任何推荐的更改/转换程序，只需重命名或是否有必要？

Answer 1

如果你看到angular-cli.json，"styles":就是一个数组。所以它应该允许我们将多个样式文件添加为逗号分隔的数组。这应该删除警告。

但是，我认为在您的应用程序中使用相似的样式会更好。如果要将所有文件转换为scss / sass，可以通过以下方式执行此操作：

将您的css文件重命名为.scss / .sass。例如：my-file.css到my-file.scss。
在每个相应的.component.ts文件中，使用styleUrls文件名更新.scss/.sass。例如：styleUrls: ['my-file.css']到styleUrls: ['my-file.scss']
将styles:[ "styles.css"],中的angular-cli.json更改为styles:["styles.scss],，应该这样做！

您可以在此处了解有关sass / scss的更多信息：Sass Lang Guide

Answer 2

将文件从sass重命名为scss。 Scss是世界公认的，sass只是源自css的另一种语言的语法。编译器识别scss。

使用此命令更改项目扩展名

ng set defaults.styleExt = scss

手动更改.angular.json：

"styleExt": "scss"

您也可以手动更改扩展程序，没有任何反应。

Answer 3

1。在本地风格的情况下，不推荐使用。因此，对于角度中的每个组件来说，处理这两种类型都太复杂了。但对于global style，defer load CSS或inline css，您可以选择该选项。

2。 3。如果您已经有一些 .css 代码，请使用 .scss 。每个 .css 代码都可以包含在 .scss 文件中。有关详细信息，请阅读this link。

4. Sourangshu 的答案中有很好的描述， 1中有https://angular.io/guide/component-styles#component-styles和the link。 / strong>

Answer 4

如果您使用的是最新版本的angular-cli，您应该使用它将css更改为sass

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

不推荐，但这是可能的。
是，并在组件中更改。
他们很相似。主要区别在于语法。 What's the difference between SCSS and Sass?
你应该有变量文件。还有一些用于共享样式/ mixins和其他可重用内容的文件夹。

Answer 5

我发现最好的程序是（Angular 5）：首先克隆你的存储库。

1. find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \;
2. Vscode: find .css replace to .scss
3. npm install to make sure that .css files in the node_modules are not messed up.

它没有任何错误。

GO！

Angular在同一个项目中使用scss / sass和css

5 个答案: