如何在 VueJS 组件中使用 Bootstrap mixins [英] How to use Bootstrap mixins in VueJS components
问题描述
我正在使用 vue-cli + bootstrap-vue.尽管我像这样(在我的 main.js 中)导入了 Bootstrap,但我无法弄清楚为什么以及如何引导混合根本不起作用
I'm using vue-cli + bootstrap-vue. I can't figure out why and how bootstrap mixins not working at all despite I imported Bootstrap like this (in my main.js)
import 'bootstrap/scss/bootstrap-grid.scss'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue);
并尝试在组件内部
<style lang="scss" scoped>
.xxx {
@include media-breakpoint-up(md) {
display: none;
}
}
</style>
但是如果我导入丢失的文件,一切都会好的:
But if I import missing files everything will be fine:
<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>
如何避免在每个组件中导入这些文件?
How to avoid importing these file in every component?
推荐答案
我想通了.如果您使用的是 vue-cli:
I figure it out. In case youre using vue-cli:
使用内容创建文件 vue.config.js:
Create file vue.config.js with content:
const path = require("path");
const loader = {
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, './src/assets/scss/global.scss')
}
}
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /.scss$/,
use: [
loader,
'sass-loader'
]
}
]
}
}
};
不要忘记安装 sass-resources-loader:
Don't forget to install sass-resources-loader:
yarn add sass-resources-loader -D
并重启开发服务器.因此,从现在开始,您可以在 global.scss 中定义/导入变量、mixin 和其他内容,并且这些变量/mixin 将在每个组件中可用,无需导入.
And restart dev server. So from now you can define/import variables, mixins and other stuff inside that global.scss and these variables/mixins will be available inside every component without import.
这篇关于如何在 VueJS 组件中使用 Bootstrap mixins的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!