如何在角度6项目中使用less和bootstrap？

Question

我编辑了angular.json样式文本以使用less

"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

对于Bootstrap：

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。