如何在SASS中使用Angular 4

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指令:

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

这将CSS从其他CSS文件导入主CSS文件,根据您选择插入的顺序将每个文件的内容附加到主文件.

请注意,您没有需要的.scss文件扩展名,如上海社会科学院将自动处理,你可以简单地导入@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']
})