为了使用SASS设置Angular + Bootstrap 4,我们只需要配置Angular CLI并安装Bootstrap 4 npm软件包。无需安装任何SASS编译器,因为它已包含在内。
编辑:此答案已更新为可以与较新版本的Angular CLI(已通过6.1.3版测试)一起使用。我在此答案的底部留下了较旧的Angular CLI的说明,但是我强烈建议您更新Angular CLI版本。
使用新的ANGU CLI(版本6或更高版本)的说明
1)配置Angular CLI以使用SASS而不是CSS
-在现有项目上:
编辑angular.json
文件,然后将"styleext": "scss"
键值添加到projects.PROJECT_NAME.schematics.@schematics/angular:component
对象。
它应该是这样的:
{
// ...
"projects": {
"PROJECT_NAME": {
// ....
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
// ...
}
-创建新项目时
只需使用:
ng new my-project --style=scss
2)将现有的组件样式从CSS更改为SASS(如果有)
为此,您只需将样式文件从重命名为.css
,.scss
然后相应地更改@Component({ ... })
配置:
styleUrls: ['./my-component.scss']
通过这种方式,angular-cli将在执行诸如之类的命令时每当文件更改时自动监视并重新编译这些文件ng serve
。
3)添加Bootstrap 4
通过npm安装Bootstrap 4:
npm install bootstrap --save
现在将Bootstrap添加到阵列angular-cli.json
内的配置中styles
(在任何其他自定义css / scss文件之前,以使它们覆盖引导程序规则:
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
/* ... */
],
这样,Bootstrap 4源代码将保持干净,每发布一个新版本,就很容易对其进行升级。
4)添加您的自定义(全局)SASS文件
可以在全局范围内影响项目的任何其他SASS样式(与单个Component样式不同)可以添加到app/assets/scss
,然后在styles
数组中引用angular-cli.json
。
我的建议是引用一个main.scss
包含所有自定义SASS样式的文件:例如,_variables.scss
用于自定义变量的a,_global.scss
用于全局规则的文件等。
因此,您angular-cli.json
将只引用一个自定义main.scss
文件:
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"src/assets/scss/main.scss"
],
内部包含您所有的自定义全局* SASS代码:
// main.scss
@import "variables";
@import "global";
// import more custom files...
*请注意,您不得在此处包括*.scss
单个组件的样式文件。
5)包括对Bootstrap JavaScript和jQuery的替换。
有些项目允许您在不使用jQuery的情况下使用Bootstrap 。
两个例子:
这里讨论了这两个项目之间的区别:“ ng-bootstrap”和“ ngx-bootstrap”之间有什么区别?
使用旧角CLI的说明
警告:我将不再保留答案的这一部分,因此建议继续阅读Angular CLI版本,并按照上述说明进行操作,以继续阅读它。
1)配置Angular CLI以使用SASS而不是CSS
跑:
ng set defaults.styleExt scss
这会影响您的.angular-cli.json
配置文件(示例)。
注意:如果您是从头开始,则可以使用Angular CLI使用以下命令创建一个新项目:
ng new my-project --style=scss
等同于正常创建一个新项目,然后运行上述命令。
2)将现有的组件样式从CSS更改为SASS(如果有)
为此,您只需将样式文件从重命名为.css
,.scss
然后相应地更改@Component({ ... })
配置:
styleUrls: ['./my-component.scss']
(示例)。
通过这种方式,angular-cli将在执行以下命令时在文件发生更改时自动监视并重新编译这些文件 ng serve
。
3)添加Bootstrap 4
通过npm安装Bootstrap 4:
npm install bootstrap --save
现在将Bootstrap添加到阵列.angular-cli.json
内的配置中styles
(在任何其他自定义css / scss文件之前,以使它们覆盖引导程序规则:
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
/* ... */
],
(示例)。
这样,Bootstrap 4源代码将保持干净,每发布一个新版本,就很容易对其进行升级。
4)添加您的自定义(全局)SASS文件
可以在全局范围内影响项目的任何其他SASS样式(与单个Component样式不同)可以添加到app/assets/scss
,然后在styles
数组中引用.angular-cli.json
。
我的建议是引用一个main.scss
包含所有自定义SASS样式的文件:例如,_variables.scss
用于自定义变量的a,_global.scss
用于全局规则的文件等。( 例如)。
因此,您.angular-cli.json
将只引用一个自定义main.scss
文件:
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"assets/scss/main.scss"
],
内部包含您所有的自定义全局* SASS代码:
// main.scss
@import "variables";
@import "global";
// import more custom files...
*请注意,您不得在此处包括*.scss
单个组件的样式文件。
5)包括对Bootstrap JavaScript和jQuery的替换。
有些项目允许您在不使用jQuery的情况下使用Bootstrap 。
两个例子:
这里讨论了这两个项目之间的区别:“ ng-bootstrap”和“ ngx-bootstrap”之间有什么区别?