Question

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

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

问题是，当我在scss中设置component文件时，它没有生成它自己的.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

我希望能够在css文件中设置主styles.scss样式，稍后将在构建过程中将其插入index.html文件中。但是也能够为我拥有的每个组件生成一个css文件，例如home和client，并且只在自己的css中使用这些component个样式。

有可能吗？我试过这个，我没有找到任何关于此的其他资源！

Answer 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";
}

希望这有帮助！：）

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

Answer 3

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

ng new project-name --style scss

Answer 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内添加一个带有类名leftnav.html的包装div，并使用它作为我的leftnav.scss的根包裹而不是组件选择器

所以我的新

.leftnav{
    background:red; 
}

它有效！

Answer 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

如何在SASS中使用Angular 4

5 个答案: