在Angular中同时使用CSS和SCSS是否可行？

Question

我正在将一个使用.scss（SASS）的独立构建模块添加到一个使用纯CSS设置的现有Angular应用程序中。这两者是否可以并排存在，是否需要任何自定义配置，例如在angular-cli.json默认部分中？

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

还是只能使用其中之一？

- Bernoulli IT

---

可以两者兼得。.angular-cli.json 中的 defaults 属性仅告诉 angular-cli 在创建新组件时使用哪一个。只需将该值设置为您更经常使用的值即可。 - David

Answer 1

Angular 6+的编辑

在Angular的GitHub页面上发现:

stylePreprocessorOptions仍然受支持。不过，您需要手动更新新生成的angular.json文件。它的新位置在json的“options”块内。

一个示例配置可能如下:

"options": {
    "outputPath": "../webapp",
    "index": "src/index.html",
    "main": "src/main.ts",
    "tsConfig": "src/tsconfig.app.json",
    "polyfills": "src/polyfills.ts",
    "assets": [
        {
            "glob": "**/*",
            "input": "src/resources",
            "output": "/resources"
        },
    ],
    "styles": [
        "src/styles.scss"
    ],
    "stylePreprocessorOptions": {
        "includePaths": [
            "src/styles"
        ]
    },
    "scripts": []
}

请注意路径已更改。 原始回答 实际上，只需将"styleExt"设置为"css"，它就可以直接运行。特定模块中的一组组件正在使用SASS。我有一个sass文件夹，其中包含变量和mixin，并且需要在angular-cli.json中进行设置，以正确编译/处理这些scss文件：

"stylePreprocessorOptions": {
  "includePaths": [
    "sass"
  ]
}

使用css和scss文件混合编写，应用程序呈现正常。我认为这个styleExt参数仅仅是为了在通过angular-cli命令添加组件时生成默认的组件样式(css, scss, less)文件。

- Bernoulli IT

---

我在 angular8 应用程序中找不到任何名为 stylePreprocessorOptions 或 angular-cli.json 的配置。请问您能否建议在哪里进行更改？ - Butterfly

Answer 2

您可以同时使用SASS或CSS，但需要将样式扩展设置为SASS或仅限CSS。

如果您想在组件中使用CSS或SASS，请使用Angular CLI生成组件，例如：

对于CSS：

ng g component my-component --style=css

对于SASS

ng g component my-component --style=sass

所以将样式扩展设置为SASS，并在您的项目中使用CSS扩展名。

- Suhel

---

你的答案和我的有什么不同？除了展示如何创建文件，本质上是相同的东西。 - Mike Tung

Answer 3

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

- Mike Tung

---

那甚至不需要...因为您可以从下面的答案中阅读到。无论如何，谢谢。 - Youp Bernoulli