我想在Angular中使用Bootstrap(scss)
环境:Angular 8.2和Bootstrap 4.3。
我在Angular的组件中想使用Bootstrap的mixin,开始搜索了一下。
.hoge {
@include media-breakpoint-down(xs) {
text-align: left;
..
}
}
看了这个或看了那个就能理解。
-
- 在angular.json文件中的styles和scripts部分进行记录
-
- 在第一个加载的样式表中进行导入
- 在想要使用的样式表中进行导入
有各种方法
在我的环境中,1已经被实现了。
那是理所当然的,因为通常在类名中会直接写d-flex或者mx-0这样的使用。
不过,我提及的那个include语句的错误还是无法消除!
为什么呢,为什么呢…不管我搜索多少次,都只出现同样内容的文章!!
总结
在angular.json中加载的只是一个普通的css文件。
被`include`调用的`minxin`是用`scss`而不是`css`编写的。
换句话说,必须导入bootstrap.scss而不是bootstrap.css!!
通过尝试了3种方法后,Angular收到了顺利的OK回复!
@import "~bootstrap/scss/bootstrap";
..
.hoge {
@include media-breakpoint-down(xs) {
text-align: left;
..
}
}
解决!
顺便说一下,即使在angular.json的styles中写入bootstrap.scss,它也不会被加载进来。