Angular中是否可以同时拥有css和scss答案

【问题标题】：Is it possible to have both css and scss in AngularAngular中是否可以同时拥有css和scss
【发布时间】：2018-08-07 05:17:50
【问题描述】：

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

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

还是只能使用两者之一？

【问题讨论】：

是的，你可以两者兼得。 .angular-cli.json 中的 defaults 属性只是告诉 angular-cli 在您创建新组件时使用哪一个。只需将值设置为我猜你使用得越频繁的值

标签： css angular sass angular-cli

【解决方案1】：

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

【讨论】：

这甚至都不需要...您可以从下面的回答中读到。无论如何，谢谢。

【解决方案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 扩展

【讨论】：

你的答案和我的有什么不同？除了展示如何制作文件之外，它本质上是一样的

【解决方案3】：

编辑 Angular 6+

Found on GitHub page of Angular:

stylePreprocessorOptions 仍受支持。不过，您将不得不手动更新新生成的angular.json。它的新位置在 json 的“选项”块内。

示例配置可能如下所示：

"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。我有一个包含变量和 mixins 的 sass 文件夹，angular-cli.json 中的这个设置是正确编译/处理这些 scss 文件所必需的：

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

混合使用 css 和 scss 文件时，应用程序可以很好地呈现。我假设在通过angular-cli 命令添加组件时，此styleExt 参数仅用于生成默认组件样式 (css, scss, less) 文件。

【讨论】：

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