如何在 Angular 6 项目中使用 less & bootstrap？答案

【问题标题】：how to use less & bootstrap in angular 6 project?如何在 Angular 6 项目中使用 less & bootstrap？
【发布时间】：2019-02-09 00:46:47
【问题描述】：

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

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

我创建一个组件并测试它的工作原理。但现在我想将组件 css/less 与 bootgstrap 类混合。

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

我输入我的less：

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

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

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

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

这个也编译失败，报错：.btn is undefined

如何解决这个问题？我希望组件中的所有按钮都具有从引导程序继承的左右 1px 边距

【问题讨论】：

标签： css angular bootstrap-4 less

【解决方案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。

【讨论】：

并在其上使用 ngx-bootstrap npm install ngx-bootstrap --save
我已经做到了。我也使用 ngx-bootstrap。唯一的问题是我不能将引导类混合到我的组件类中。
你有 jquery 和 popper.js 安装检查 package.json 吗？
@Akj，在引导程序 5 中，您不使用 jquery 或 popper，否则在 angular.json-->脚本添加 "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

【解决方案2】：

这是我在项目中使用引导程序的方式

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

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

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

【讨论】：