如何在angular 6项目中使用less&bootstrap?

我已经编辑了angular.json样式文本以使用更少的

"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未定义

怎么解决这个问题?我希望我的组件中的所有按钮都有从Bootstrap继承的左边和右边的1px边距。