CSS 如何在 SASS 中使用 Angular 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44709585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Angular 4 with SASS
提问by celsomtrindade
I'm starting my first project using Angular4and sassand I'm trying to figure it out how to work with sassthe proper way. I'm using angular-cliand already set the default style to use scsssyntax. I also already defined the compilation, etc.
我正在开始我的第一个项目Angular4，sass并且我正在尝试弄清楚如何以sass正确的方式工作。我正在使用angular-cli并且已经将默认样式设置为使用scss语法。我也已经定义了编译等。
However I saw that we have an option styleUrls on the component, where in some cases we define styles used only in that component.
但是我看到我们在组件上有一个 styleUrls 选项，在某些情况下，我们定义了仅在该组件中使用的样式。
The problem is, when I set a scssfile in that componentit's not generating it's own .cssfile neither being included in the main .cssfile, generated from the root project.
问题是，当我设置一个scss文件时，component它没有生成它自己的.css文件，也没有包含在.css从根项目生成的主文件中。
So basically I have a project structure like this:
所以基本上我有一个这样的项目结构：
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
And I'd like to be able to set the main cssstyle within the styles.scssfile, which will be inserted into the index.htmlfile later, on the build process. But also be able to generate a single cssfile for each component I have, e.g. homeand client, and only use those cssstyles within their own component.
我希望能够css在styles.scss文件中设置主要样式，index.html稍后将在构建过程中将其插入到文件中。但也能够为css我拥有的每个组件生成一个文件，例如home和client，并且只css在它们自己的component.
Is it possible to do it? I've tried to do it and I didn't find any other resource about this!
有可能做到吗？我试过这样做，但我没有找到任何其他资源！
采纳答案by Obsidian Age
What you are looking for is the import directive:
您正在寻找的是导入指令：
@import "styles.scss";
@import "css/styles.scss";
@import url("http://example.com/css/styles.scss");
This imports the CSS from the other CSS files into the main CSS file, appending the contents of each file to the main file based on the order that you choose to insert them.
这会将 CSS 从其他 CSS 文件导入主 CSS 文件，根据您选择的插入顺序将每个文件的内容附加到主文件。
Note that you do notneed the .scssfile extension, as SASS will handle that automatically, and you can simply import with @import "file". And you also don't need to specify each file with an independent import, as you can combine them all in a single import:
请注意，您没有需要的.scss文件扩展名，如SASS会自动处理这一点，你可以简单地导入@import "file"。而且您也不需要使用独立导入指定每个文件，因为您可以将它们全部组合在一个导入中：
@import "styles.scss", "css/styles.scss", url("http://example.com/css/styles.scss");
You can also do nested imports by specifying the @importwithin a selector:
您还可以通过@import在选择器中指定 来进行嵌套导入：
.global-nav {
@import "nav-bkgd";
}
Hope this helps! :)
希望这可以帮助！:)
回答by creep3007
In an Angular 4.4+ with ng-cli, you only need to change the the following settings in .angular-cli.json
在带有 ng-cli 的 Angular 4.4+ 中，您只需要更改以下设置 .angular-cli.json
{
...
"apps": [
...
"styles": [
"styles.scss"
],
...
]
...
"defaults": {
"styleExt": "scss",
"component": {}
}
}
and in each Component, if necessary, change .cssto .scss
并在每个组件中，如有必要，更改.css为.scss
@Component({
selector: 'app-your-component',
styleUrls: ['./your-component.component.scss']
})
回答by rch850
You can specify scss when you create project.
您可以在创建项目时指定 scss。
ng new project-name --style scss
回答by Moath.Omar
i had the same issue, i have a leftnav component and its scss seemed to be never compiled , i tried all the above but didnt work , and i tried to creat new app using ng new .... but after that i got it fixed by changing my thoughts :D
我遇到了同样的问题，我有一个 leftnav 组件，它的 scss 似乎从未编译过，我尝试了上述所有方法但没有奏效，我尝试使用 ng new 创建新应用程序......但在那之后我得到了修复通过改变我的想法：D
seems like we cant use same component selectorinside its relative .scss file
but instead we should use a wrapping div with suitable className , and use that .className as a root wrapping of .scss file content.
似乎我们不能same component selector在其相对的 .scss 文件中使用，而是应该使用具有合适 className 的包装 div ，并使用该 .className 作为 .scss 文件内容的根包装。
let me demonstrate, this is my app:
让我演示一下，这是我的应用程序：
app/component/leftnav
|leftnav.scss
|leftnav.html ==> simply `left nav works!`
|leftnav.ts ==> selector leftnav
app/
|app.html
|app.scss
and inside the old leftnav.scss
在旧的 leftnav.scss 里面
leftnav{
background:red;
}
and inside app.html
在 app.html 里面
<leftnav></leftnav>
and how i got it fixed ! as i said by adding a wrapping div with classname .leftnavinside leftnav.htmland use its as root wrapping of my leftnav.scss instead of component selector
以及我是如何修复它的！正如我所说的，通过.leftnav在里面添加一个带有类名的包装 divleftnav.html并将其用作我的 leftnav.scss 而不是组件选择器的根包装
so my new
所以我的新
.leftnav{
background:red;
}
and it works !
它有效！
回答by Black Mamba
If you have an already wokring project ng new my-sassy-app --style=scss
won't help so you need to use ng set defaults.styleExt scss
this changes angular.cli.jsonfile as
如果您已经有一个 wokring 项目ng new my-sassy-app --style=scss
将无济于事，因此您需要ng set defaults.styleExt scss
将此更改angular.cli.json文件用作
"defaults": {
"styleExt": "scss",
"component": {
}
}
Now change the already present cssfiles to scssextension you should see that scssis now working.Don't forget to change the cssextensions in your component definations to scssThe source
现在将已经存在的css文件更改为scss扩展名，您应该看到它scss现在正在工作。不要忘记将css组件定义中的扩展名更改为scssThe source
