我想在使用 Angular CLI 创建的 Angular(4+) 项目中使用带有 SASS 的 Bootstrap 4。
我特别需要：
ng serve 脚本时添加监视和自动重新编译【问题讨论】：
标签： angular sass angular-cli bootstrap-4
为了使用 SASS 设置 Angular + Bootstrap 4，我们只需要配置 Angular CLI 并安装 Bootstrap 4 npm 包。无需安装任何 SASS 编译器，因为它已经包含在内。
编辑：此答案已更新，可与较新版本的 Angular CLI 一起使用（已在 6.1.3 版中测试）。我在此答案的底部留下了旧 Angular CLI 的说明，但我强烈建议您 update your Angular CLI version。
编辑您的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
为此，您只需将样式文件从 .css 重命名为 .scss 并相应地更改 @Component({ ... }) 配置：
styleUrls: ['./my-component.scss']
这样，当您执行ng serve 之类的命令时，只要这些文件发生变化，angular-cli 就会自动监视并重新编译这些文件。
通过 npm 安装 Bootstrap 4：
npm install bootstrap --save
现在将 Bootstrap 添加到 styles 数组内的 angular-cli.json 配置中（在任何其他自定义 css/scss 文件之前，以便让它们覆盖引导规则：
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
/* ... */
],
这样，Bootstrap 4 源代码将保持干净，并且每当发布新版本时都可以很容易地对其进行升级。
可以在app/assets/scss 下添加应全局影响项目的任何其他 SASS 样式（与单个组件样式不同），然后在angular-cli.json 的styles 数组中引用。
我的建议是引用一个包含所有自定义 SASS 样式的 main.scss 文件：例如，_variables.scss 用于自定义变量，_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 样式文件。
有些项目可以让你在不使用 jQuery 的情况下使用 Bootstrap。
两个例子：
这里讨论这两个项目之间的区别：What is the difference between "ng-bootstrap" and "ngx-bootstrap"?
警告：我将不再保留这部分答案，因此我建议继续阅读它，update your Angular CLI version 并按照上述说明进行操作。
运行：
ng set defaults.styleExt scss
这将影响您的 .angular-cli.json 配置文件 (example)。
注意：如果您是从头开始，您可以使用 Angular CLI 创建一个新项目：
ng new my-project --style=scss
相当于正常新建一个项目，然后运行上面提到的命令。
为此，您只需将样式文件从 .css 重命名为 .scss 并相应地更改 @Component({ ... }) 配置：
styleUrls: ['./my-component.scss']
(example).
这样，当你执行ng serve之类的命令时，当这些文件发生变化时，angular-cli 将自动监视并重新编译这些文件。
通过 npm 安装 Bootstrap 4：
npm install bootstrap --save
现在将 Bootstrap 添加到 styles 数组内的 .angular-cli.json 配置（在任何其他自定义 css/scss 文件之前，以便让它们覆盖引导规则：
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
/* ... */
],
(example).
这样，Bootstrap 4 源代码将保持干净，并且每当发布新版本时都可以很容易地对其进行升级。
可以在app/assets/scss 下添加应全局影响项目的任何其他 SASS 样式（与单个组件样式不同），然后在 .angular-cli.json 的 styles 数组中引用。
我的建议是引用一个 main.scss 文件，其中将包含所有自定义 SASS 样式：例如，_variables.scss 用于自定义变量，_global.scss 文件用于全局规则等。（@987654329 @)。
因此，在您的 .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 样式文件。
有些项目可以让你在不使用 jQuery 的情况下使用 Bootstrap。
两个例子：
这里讨论这两个项目之间的区别：What is the difference between "ng-bootstrap" and "ngx-bootstrap"?
【讨论】：
除了@ShinDarth 的answer，您可能还想采用更简单的解决方案，只导入您需要的 Bootstrap 模块，而不是全部导入。
所以你会替换：
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"assets/scss/main.scss"
],
与：
"styles": [
"assets/scss/main.scss"
],
那么您的main.scss 将如下所示：
// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";
【讨论】：
assets 文件夹，以便在为生产 (build --prod) 构建时不包含它们，因为它们可能不需要
从版本 6 应该是
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"src/styles.scss",
"src/assets/scss/main.scss"
]
如果你有适合我的自定义主题作品
只在styles.scss中添加库
@import "./assets/scss/mytheme";
@import "~bootstrap/scss/bootstrap";
【讨论】：
这是我成功构建的另一种方法
1 - 安装引导程序
npm install bootstrap
这应该在 node_modules 下添加 boostrap scss 文件。 （第2-6步来自https://code.visualstudio.com/docs/languages/css）
2 - 安装 node-sass
nmp install -g node-sass
这是需要将 sass 转换为 css
3 - 在适合您的地方创建一个文件夹来保存 scss 和生成的 css 文件。例如
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
4 - 创建一个包含以下内容的 custom.scss 文件：
@import "../node_modules/bootstrap/scss/bootstrap";
5 - 通过 Ctrl+Shift+B 在 VSCode 中创建任务 > 配置任务 > 从模板创建 tasks.json 文件 > 其他
.vscode 下的tasks.json 文件是使用默认内容创建的。 将内容替换为
// Sass configuration
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [{
"label": "Sass Compile",
"type": "shell",
"command": "node-sass scss/custom.scss scss/custom-bootstrap.css",
"group": "build",
"problemMatcher": [
"$eslint-stylish"
]
}]
}
注意：根据需要修改文件名和路径。
6 - 运行生成css的任务：Ctrl+Shift+B > 'Sass compile' or
7 - 按照引导主题过程中的步骤进行操作：(https://getbootstrap.com/docs/4.1/getting-started/theming/)
【讨论】：
如果其他人遇到我在使用 angular-cli 运行 Bootstrap 4 时遇到的 Javascript 依赖项问题，您还需要让 angular-cli 编译器知道您已经安装了 boostrap 4 需要的其他依赖项：
jquery、popper.js 和 bootstrap.js
为此，您需要将 .angular-cli.json 配置文件中的脚本数组修改为如下内容：
"scripts": [
"../node_modules/jquery/dist/jquery.slim.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"]
我猜你已经使用 npm install --save jquery popper.js 安装了 jquery 和 popper，所以这些包在 node_modules 文件夹中可用。
【讨论】：