如何在 SASS 中使用 Angular 4

Posted 2023-03-06

【中文标题】如何在 SASS 中使用 Angular 4

【英文标题】：How to use Angular 4 with SASS

【发布时间】：2017-11-26 08:01:31

【问题描述】：

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

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

问题是，当我在该component 中设置scss 文件时，它不会生成它自己的.css 文件，也不会包含在从根项目生成的主.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 文件中。但也能够为我拥有的每个组件生成一个 css 文件，例如home 和 client，并且只在它们自己的 component 中使用这些 css 样式。

有可能吗？我已经尝试过，但没有找到任何其他资源！

【问题讨论】：

据我了解，封装的 css 被捆绑在 main.bundle.js 中，然后当应用程序加载时，它将样式附加到 head 标签（在与主要样式不同的样式标签中） .您的样式根本没有加载吗？

@LLai 是的，它们是，但只是主要样式文件style.css。但例如，文件 home.scss 和 client.scss 永远不会编译成 .css，因此永远不会被注入。

奇怪，你能重新安装你的节点模块吗？也许其中一个装载机搞砸了

在这里，您知道事情通常是如何运作的，并且您正在做同样的事情。但由于某种原因，它们工作正常。您将 styles.scss 添加到 .angular-cli 中，但仍在最终构建中，它没有反映在您的页面中？

【参考方案1】：

你要找的是import directive:

@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";

希望这会有所帮助！ :)

【讨论】：

我不知道我是否说清楚了，但主要问题不是导入文件，而是编译它们。例如，在问题中，文件 _home.scss 和 _client.scss 永远不会被编译成纯 .css。还是我在您的回答中遗漏了什么？

我很抱歉。但是，没有理由不编译它们。只需将它们分别称为/app/home/_home.scss 和/app/client/_client.scss。您可能会发现需要清除缓存；尝试在单击刷新图标时按住SHIFT。

它们正在被编译，但只有在使用该组件时，它才会以样式属性注入头部。

【参考方案2】：

在带有ng-cli的Angular 4.4+中，您只需要更改.angular-cli.json中的以下设置

  ...
  "apps": [
    ...
    "styles": [
        "styles.scss"
      ],
      ...
  ]
  ...
  "defaults": 
    "styleExt": "scss",
    "component": 
  

并且在每个组件中，如有必要，将.css 更改为.scss

@Component(
    selector: 'app-your-component',
    styleUrls: ['./your-component.component.scss']
)

【讨论】：

但是scss需要编译，你在哪里定义的？它不仅仅是一个扩展......

【参考方案3】：

创建项目时可以指定scss。

ng new project-name --style scss

【讨论】：

就像我在问题中所说的那样，我已经做到了。这不是问题。

抱歉错过了。您的 home 组件的 styleUrls 是否看起来像 styleUrls: ['./_home.scss']？

【参考方案4】：

我有同样的问题，我有一个 leftnav 组件，它的 scss 似乎从未编译过，我尝试了以上所有方法但没有工作，我尝试使用 ng new 创建新应用程序....但之后我通过改变我的想法来解决它：D

似乎我们不能在其相对的 .scss 文件中使用 same component selector 但相反，我们应该使用带有合适 className 的包装 div，并将该 .className 用作 .scss 文件内容的根包装。

让我演示一下，这是我的应用程序：

app/component/leftnav
  |leftnav.scss
  |leftnav.html ==> simply `left nav works!`
  |leftnav.ts ==> selector leftnav
app/
  |app.html
  |app.scss

在旧的 leftnav.scss 中

leftnav
    background:red;

在app.html里面

<leftnav></leftnav>

以及我是如何修复它的！正如我所说，通过在leftnav.html 内添加类名.leftnav 的包装div 并将其用作我的leftnav.scss 的根包装而不是组件选择器

所以我的新

.leftnav
    background:red; 

它有效！

【参考方案5】：

如果您已经有一个工作项目 ng new my-sassy-app --style=scss 将无济于事，因此您需要使用 ng set defaults.styleExt scss 这将 angular.cli.json 文件更改为

"defaults": 
  "styleExt": "scss",
  "component": 
 

现在将已经存在的css 文件更改为scss 扩展名，您应该会看到scss 现在正在工作。不要忘记将组件定义中的css 扩展名更改为scss The source