如何在VueJS组件中使用Bootstrap Mixins [英] How to use Bootstrap mixins in VueJS components

问题描述

我正在使用vue-cli + bootstrap-vue.尽管我这样导入了Bootstrap(在我的main.js中)，但我无法弄清楚为什么以及为什么Bootstrap Mixins根本无法工作

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和其他内容，并且这些变量/mixins无需导入即可在每个组件中使用.

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屋！