如何在angular 6项目中使用更少的引导程序？

Question

我已经编辑了angular.json styleext以减少使用

"schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "less"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }

我创建了一个组件并对其进行了较小的测试。但是现在我想将组件css / less与bootgstrap类混合使用。

例如，我希望组件中的所有按钮都具有.mx-1

我输入我的更少：

.btnmx-1{
   .btn();
   .mx-1();
}

但是失败了。我尝试导入：

 @import "../../../../node_modules/bootstrap/dist/css/bootstrap.min.css";

.btnmx-1{
   .btn();
   .mx-1();
}

此文件也无法编译，并显示错误： .btn未定义

如何解决此问题？我希望组件中的所有按钮都具有从bootstrap继承的左右边距1px

Answer 1

对于 Bootsrap ：

npm install bootsrap --save

在angular.json中：

  "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],

对于少：

添加less文件类型，而不是css（默认情况下）

comp.component.less

在angular.json中。

将属性defaults.styleExt设置为less。

Answer 2

这是我如何在我的项目中使用引导程序

1. 从链接下载引导源文件：https://getbootstrap.com/docs/4.0/getting-started/download/
2. 在您的项目中创建样式文件夹，将 scss 文件夹从资源复制到它，并将其重命名为引导程序以更清晰
3. 创建您自己的 mixin 并将其导入 bootstrap.scss 文件（在所有现有导入的下方）
4. 将 bootstrap.scss 导入 style.scss（或在 angular.json 中）

就我而言，我只想使用 bootstrap utils 类，如填充、边距、标题……所以我只是将这些文件保存在我的 boostrap scss 文件夹中

如果您需要全部保留所有或删除一些需要引导 js 像轮播一样运行的模块....