首页 文章

如何在Angular中使用带SASS的Bootstrap 4

提问于
浏览 次
46

我想在使用Angular CLI创建的Angular（4）项目中使用Bootstrap 4和SASS .

特别是我需要：

  • 使用SASS而不是CSS作为全局样式和组件样式

  • 编译Bootstrap SASS源以及我的自定义* .scss样式

  • 确保我的自定义样式覆盖Bootstrap源，因此我可以在需要时覆盖Bootstrap源，而无需编辑Bootstrap源本身（可以轻松升级Bootstrap源版本）

  • 只要我的任何* .scss文件（包括组件和全局样式）更改为 ng serve 脚本，都会添加监视和自动重新编译

angular sass angular-cli bootstrap-4

5 回答

  • 18

    为了使用SASS设置Angular Bootstrap 4，我们只需要配置Angular CLI并安装Bootstrap 4 npm软件包 . 无需安装任何SASS编译器，因为它已经包含在内 .

    EDIT ：此答案已更新，可与较新版本的Angular CLI（使用6.1.3版测试）配合使用 . 我在本答案的底部留下了旧Angular CLI的说明， however I strongly recommend you to update your Angular CLI version .

    使用新的角度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添加到 styles 数组中的 angular-cli.json config（在任何其他自定义css / scss文件之前，以便让它们覆盖引导规则：

    "styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

    这样Bootstrap 4源代码将保持干净，每当发布新版本时，它都将非常容易升级 .

    4）添加自定义（全局）SASS文件

    任何其他应该全局影响项目的SASS样式（与单个Component样式不同）可以在 app/assets/scss 下添加，然后在 styles 的 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...

    *请注意， MUST NOT 此处包含单个组件的 *.scss 样式文件 .

    5）包括Bootstrap JavaScript和jQuery的替代品 .

    有些项目允许您使用Bootstrap without jQuery .

    两个例子：

    这两个项目之间的区别在这里讨论：What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

    使用OLD ANGULAR CLI的说明

    WARNING ：我不再保留这部分答案了，所以请继续阅读，我建议update your Angular CLI version并按照上述说明操作 .

    1）配置Angular CLI以使用SASS而不是CSS

    跑：

    ng set defaults.styleExt scss

    这会影响你的 .angular-cli.json 配置文件（example） .

    注意：如果您从头开始，可以使用Angular CLI创建一个新项目： ng new my-project --style=scss 这相当于正常创建一个新项目，然后运行上面提到的命令 .

    2）将现有的组件样式从CSS更改为SASS（如果有）

    要完成此操作，您只需将样式文件从 .css 重命名为 .scss 并相应地更改 @Component({ ... }) 配置：

    styleUrls: ['./my-component.scss']

    （example） .

    通过这种方式，当您执行 ng serve 等命令时，angular-cli会自动观察并重新编译这些文件 .

    3）添加Bootstrap 4

    通过npm安装Bootstrap 4：

    npm install bootstrap --save

    现在将Bootstrap添加到 styles 数组中的 .angular-cli.json config（在任何其他自定义css / scss文件之前，以便让它们覆盖引导规则：

    "styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

    （example） .

    这样Bootstrap 4源代码将保持干净，每当发布新版本时，它都将非常容易升级 .

    4）添加自定义（全局）SASS文件

    任何其他应该全局影响项目的SASS样式（与单个Component样式不同）可以在 app/assets/scss 下添加，然后在 .angular-cli.json .angular-cli.json 数组中引用 .

    我的建议是引用一个包含所有自定义SASS样式的 main.scss 文件：例如 _variables.scss 用于自定义变量， _global.scss 文件用于全局规则等 . （example） .

    所以在你的 .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...

    *请注意， MUST NOT 此处包含单个组件的 *.scss 样式文件 .

    5）包括Bootstrap JavaScript和jQuery的替代品 .

    有些项目允许您使用Bootstrap without jQuery .

    两个例子：

    这两个项目之间的区别在这里讨论：What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

    回复于
  • 0

    除了@ 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";
    回复于
  • 87

    从版本6应该是

    "styles": [
   "node_modules/bootstrap/scss/bootstrap.scss",
   "src/styles.scss",
   "src/assets/scss/main.scss"
]

    如果您有自定义主题作品

    只在styles.scss中添加lib

    @import "./assets/scss/mytheme";
@import "~bootstrap/scss/bootstrap";
    回复于
  • 5

    如果其他人遇到使用angular-cli运行Bootstrap 4时遇到的Javascript依赖问题，您还需要让angular-cli编译器知道您已经安装了boostrap 4需要的其他依赖项：

    jquery, popper.js and bootstrap.js

    为此，您需要将.angular-cli.json配置文件中的scripts数组修改为：

    "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文件夹中可用 .

    回复于
  • 0

    这是我成功构建的另一种方法

    1 - 安装bootstrap

    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'或

    7 - 按照bootstrap主题程序中的步骤操作：（https://getbootstrap.com/docs/4.1/getting-started/theming/）

    回复于

相关问题