Css 如何在SASS中使用Angular 4

我正在使用

Angular4

和

sass

开始我的第一个项目，我正在试图找出如何以正确的方式使用

sass

。我正在使用

angularcli

，并且已经将默认样式设置为使用

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
，并且只在自己的
组件中使用这些
css
样式

有可能吗？我已经试过了，但我没有找到任何其他的资源
 您需要的是：

这会将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";
}

希望这有帮助！：）
 您可以在创建项目时指定SCS

ng new project-name --style scss

在使用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']
})

我也有同样的问题，我有一个leftnav组件，它的SCS似乎从来没有被编译过，我尝试了以上所有的方法，但没有成功，我尝试使用ng new创建新的应用程序。。。。但在那之后，我改变了想法，把它修好了：D

似乎我们不能在其相对的.scss文件中使用相同的组件选择器
但是我们应该使用具有合适类名的包装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>

而且它有效
 如果您已经有了一个wokring项目
ng新的my sassy应用程序--style=scss
没有帮助，因此您需要使用
ng set defaults.styleExt scss
这将
angular.cli.json
文件更改为

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

现在将已经存在的
css
文件更改为
scss
扩展名，您应该看到
scss
正在工作。不要忘记将组件定义中的
css
扩展名更改为
scss
我不知道我是否说得很清楚，但主要问题不是扣押文件，而是编译文件。例如，在这个问题中，文件_home.scss和_client.scss从未被编译成pure.css。还是我在你的回答中遗漏了什么？我道歉。然而，没有理由不编译它们。只需将它们分别称为
/app/home/_home.scss
和
/app/client/_client.scss
。您可能会发现需要清除缓存；尝试按住SHIFT键，同时单击刷新图标。它们将被编译，但只有在使用该组件时，才会使用样式属性将其注入头部。正如我在问题中所说，我已经这样做了。这不是问题，很抱歉错过了。你的主页组件的样式URL看起来像
样式URL:['./_home.scss']
？据我所知，封装的css捆绑在main.bundle.js中，然后当应用程序加载时，它会将样式附加到head标记（在与主样式不同的样式标记中）。您的样式根本没有加载吗？@LLai是的，但是只有主样式文件
style.css
。但是，例如，home.scss和client.scss文件从未编译成.css，因此，从未得到inject.odd，您可以重新安装节点模块。也许其中一个装载机被搞砸了，你知道事情是如何运作的，你也在做同样的事情。但由于某些原因，它们工作得很好。您已将
样式.scss
添加到
.angular cli
，但仍处于最终版本中，它没有反映在您的页面中？但是需要编译scss，您在哪里定义它？这不仅仅是一个扩展。。。
.leftnav{
    background:red; 
}

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