Question

我正在使用vue-cli + bootstrap-vue。尽管我这样导入了Bootstrap（在我的main.js中），但我无法弄清楚引导混合的原因和根本不起作用

 import 'bootstrap/scss/bootstrap-grid.scss'
 import 'bootstrap-vue/dist/bootstrap-vue.css' 
 Vue.use(BootstrapVue);

并尝试在内部组件

中使用一些mixins

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

如何避免在每个组件中导入这些文件？

Answer 1

我知道了。如果您使用vue-cli：

创建包含内容的文件vue.config.js：

<div id="dnn_ctr3799_ContentPane" class="contentpane">

别忘了安装sass-resources-loader：

texts = soup.find('div', id='dnn_ctr3799_ContentPane')
name = texts.find_next(string=True)
print od.nextSibling.string

然后重新启动开发服务器。因此，从现在开始，您可以在global.scss内定义/导入变量，mixin和其他内容，并且这些变量/ mixins无需导入即可在每个组件中使用。

如何在VueJS组件中使用Bootstrap mixins

1 个答案: