如何在 SASS 中使用 Angular 4

Question

我正在使用 Angular4 和 sass 开始我的第一个项目，我试图弄清楚如何以正确的方式使用 sass 。我正在使用 angular-cli 并且已经将默认样式设置为使用 scss 语法。我也已经定义了编译等。

但是我看到我们在组件上有一个选项 styleUrls，在某些情况下，我们定义了仅在该组件中使用的样式。

The problem is, when I set a scss file in that component it’s not generating it’s own .css file neither being included in the main .css 文件，从根项目生成。

所以基本上我有一个这样的项目结构：

 app
    app.module.ts
    app.routing.ts
    home
        home.component.ts
        home.html
        _home.scss
    client
        client.component.ts
        client.html
        _client.scss
scss
    _imports.scss
    colors
        _colors.scss
    ui
        _button.scss
        _table.scss
    //.. more folder and files
styles.scss
index.html

而且我希望能够在 styles.scss 文件中设置主要的 css 样式，稍后将在构建时将其插入到 index.html 文件中过程。 But also be able to generate a single css file for each component I have, eg home and client , and only use those css 自己的样式 component 。

有可能做到吗？我试过这样做，但我没有找到任何其他资源！

原文由 celsomtrindade 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在寻找的是 导入指令：

 @import "styles.scss";
@import "css/styles.scss";
@import url("http://example.com/css/styles.scss");

这会将其他 CSS 文件中的 CSS 导入到主 CSS 文件中，根据您选择的插入顺序将每个文件的内容附加到主文件中。

请注意，您 不需要 .scss 文件扩展名，因为 SASS 会自动处理它，您可以简单地使用 @import "file" 导入。而且您也不需要为每个文件指定一个独立的导入，因为您可以将它们全部组合在一个导入中：

 @import "styles.scss", "css/styles.scss", url("http://example.com/css/styles.scss");

您还可以通过在选择器中指定 @import 来进行嵌套导入：

 .global-nav {
  @import "nav-bkgd";
}

希望这可以帮助！ :)

原文由 Obsidian Age 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您已经有一个工作项目 ng new my-sassy-app --style=scss 不会有帮助，所以您需要使用 ng set defaults.styleExt scss 这会改变 angular.cli.json 文件为

"defaults": {
  "styleExt": "scss",
  "component": {
 }
}

现在将已经存在的 css 文件更改为 scss 扩展名，您应该会看到 scss 现在正在工作。别忘了更改 css 将您的组件定义扩展为 scss 源

原文由 Black Mamba 发布，翻译遵循 CC BY-SA 3.0 许可协议