是否有可能在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”：[     “上海社会科学院”   ] }

应用程序使用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的超集。