我正在使用vue-cli bootstrap-vue . 虽然我像这样导入Bootstrap(在我的main.js中),但我无法弄清楚为什么以及bootstrap mixin根本无法正常工作
import 'bootstrap/scss/bootstrap-grid.scss'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue);
并尝试使用一些mixins inside component
<style lang="scss" scoped>
.xxx {
@include media-breakpoint-up(md) {
display: none;
}
}
</style>
但如果我导入丢失的文件一切都会好的:
<style lang="scss" scoped>
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
.xxx {
@include media-breakpoint-up(md) {
display: none;
}
}
</style>
如何避免在每个组件中导入这些文件?
1 回答
我明白了 . 如果你使用vue-cli:
使用内容创建文件vue.config.js:
别忘了安装sass-resources-loader:
并重启dev服务器 . 因此,从现在开始,您可以在global.scss中定义/导入变量,mixins和其他内容,并且这些变量/ mixins将在每个组件内部可用而无需导入 .