是否有可能在Angular中同时拥有css和scss

Question

我包括一个独立的构建模块，它将.scss（SASS）用于使用纯CSS设置的现有Angular应用程序。是否可以将它们彼此相邻并且是否需要任何自定义配置，例如在angular-cli.json默认部分中：

"defaults": {
  "styleExt": "css? scss?"
}

或者只能使用两者中的一个？

Answer 1

实际上它只是通过将"styleExt"设置为"css"而开箱即用。特定模块中的一组组件正在使用SASS。我有一个包含变量和mixins的sass文件夹，需要angular-cli.json中的这个设置才能正确编译/处理这些scss文件：

“stylePreprocessorOptions”：{“includePaths”：[“sass”]}

应用程序使用css和scss文件混合呈现正常。我假设这个styleExt参数只是在通过css, scss, less命令添加组件时生成默认组件样式（angular-cli）文件。

Answer 2

您可以同时使用这两种方式，但只需将样式扩展名设置为SASS或CSS。

现在，如果您想在组件中使用CSS或SASS，只需使用Angular CLI生成组件即可

对于CSS

ng g component my-component --style=css

对于SASS

ng g component my-component --style=sass

因此，将样式扩展设置为SASS并在项目中也使用CSS扩展

Answer 3

我建议你将styleExt更改为scss并将你的css文件更改为scss，因为scss是css的超集。