是否可以在 Angular 中同时使用 css 和 scss [英] Is it possible to have both css and scss in Angular

问题描述

我将一个使用 .scss (SASS) 的独立构建模块包含在使用纯 CSS 设置的现有 Angular 应用程序中.是否可以将它们并排放置，并且是否需要任何自定义配置，例如在 angular-cli.json 默认部分:

默认值":{"styleExt": "css?scss?"}

还是只能使用两者之一?

解决方案

EDIT for Angular 6+

在 Angular 的 GitHub 页面上找到:>

stylePreprocessorOptions 仍受支持.不过，您必须手动更新新生成的 angular.json.它的新位置在 json 的options"块内.

示例配置可能如下所示:

选项":{"outputPath": "../webapp","index": "src/index.html","main": "src/main.ts","tsConfig": "src/tsconfig.app.json","polyfills": "src/polyfills.ts",资产":[{"glob": "**/*",输入":源代码/资源"，输出":/资源"},],风格":[src/styles.scss"],样式预处理器选项":{包含路径":[源代码/样式"]},脚本":[]}

注意更改后的路径.

原始答案

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

"stylePreprocessorOptions": {包含路径":[骚"]}

应用混合使用 css 和 scss 文件可以很好地呈现.我假设这个 styleExt 参数只是在通过 angular-cli 添加组件时用于默认组件样式(css、scss、less)文件生成命令.

I am including a stand-alone build module which uses .scss (SASS) into an existing Angular app set up with plain CSS. Is it possible to have these both next to each other and does it need any custom configuration for example in the angular-cli.json defaults section:

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

Or is it only possible to use one of the two?

解决方案

EDIT for Angular 6+

Found on GitHub page of Angular:

stylePreprocessorOptions is still supported. You will have to manually update the newly generated angular.json though. Its new place is inside the "options" block of the json.

An example config could look like this:

"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": []
}

Note the changed path.

ORIGINAL answer

Actually it just went fine out-of-the-box by having the "styleExt" set to "css". A bunch of components in a specific module were using SASS. I have a sass folder with variables and mixins and this setting in angular-cli.json was needed to have these scss files compiled / processed correctly:

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

The application renders fine with a mix of css and scss files. I assume this styleExt parameter is just there for the default component style (css, scss, less) file generation when adding components via angular-cli commands.

这篇关于是否可以在 Angular 中同时使用 css 和 scss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！