作者:锦瑟刻下两段缠绵 | 来源:互联网 | 2023-01-31 14:41
我正在使用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
.
有可能吗?我试过这个,我没有找到任何关于此的其他资源!
1> Obsidian Age..:
您正在寻找的是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";
}
希望这可以帮助!:)
2> creep3007..:
在带有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']
})