首页 文章

如何在VueJS组件中使用Bootstrap mixins

提问于
浏览
1

我正在使用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 回答

  • 0

    我明白了 . 如果你使用vue-cli:

    使用内容创建文件vue.config.js:

    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:

    yarn add sass-resources-loader -D
    

    并重启dev服务器 . 因此,从现在开始,您可以在global.scss中定义/导入变量,mixins和其他内容,并且这些变量/ mixins将在每个组件内部可用而无需导入 .

相关问题