如何使用SASS与Angular 4？

Question

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

然而，我发现在组件中有一个 styleUrls 的选项，在某些情况下，我们定义仅在该组件中使用的样式。

问题是，当我在该组件中设置一个 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样式。

这种做法可能吗？我已经尝试了一下，但没有找到其他资源关于这个问题！

- celsomtrindade

---

据我所知，封装的 CSS 被捆绑在 main.bundle.js 中，当应用程序加载时，它会将样式附加到 head 标签中（在与主样式不同的单独样式标签中）。你的样式根本没有加载吗？ - LLai

@LLai 是的，它们是，但只有主样式文件style.css。例如，home.scss和client.scss这些文件从未编译成.css文件，因此也从未被注入。 - celsomtrindade

奇怪，你能重新安装一下你的节点模块吗？也许其中一个加载器出了问题。 - LLai

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

Answer 1

你要找的是 import指令。

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

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

请注意，您无需使用.scss文件扩展名，因为SASS会自动处理，您只需使用@import "file"导入即可。您也不需要使用独立的import指令来指定每个文件，而是可以将它们全部合并到单个import语句中：

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

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

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

希望这有所帮助！:)

- Obsidian Age

---

我不知道我是否表达清楚，但主要问题不是导入文件，而是编译它们。例如，在这个问题中，文件_home.scss和_client.scss从未编译成纯.css。或者我在你的回答中漏掉了什么？ - celsomtrindade

抱歉。但是它们应该可以编译，没有理由不行。只需分别引用它们为/app/home/_home.scss和/app/client/_client.scss。您可能需要清除缓存；尝试在单击刷新图标时按住SHIFT键。 - Obsidian Age

它们正在被编译，但只有在使用该组件时才会将其注入到带有样式属性的头部。 - Octavian Ruda

Answer 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']
})

- creep3007

---

但是 SCSS 需要编译，你在哪里定义它？这不仅仅是一个扩展名... - Ricky Levi

Answer 3

您可以在创建项目时指定scss。

ng new project-name --style scss

- rch850

---

就像我在问题中所说的那样，我已经完成了它。这不是问题所在。 - celsomtrindade

很抱歉错过了。你的主页组件的styleUrls看起来像这样吗：styleUrls: ['./_home.scss']？ - rch850

Answer 4

如果您已经有一个正在运行的项目，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

Answer 5

我曾经遇到过同样的问题，我有一个左侧导航组件，它的scss似乎从未被编译过，我尝试了以上所有方法都没有用，然后我尝试使用ng new创建新应用程序....但是之后我通过改变我的想法解决了这个问题:D

看起来我们不能在其相关的.scss文件中使用相同的组件选择器，而是应该使用适当的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; 
}

它能运行！

- Moath.Omar