How to use Bootstrap mixins in VueJS components

Question

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

And trying to use some mixins inside component

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

Are you also importing bootstrap as: import BootstrapVue from 'bootstrap-vue' — Dylan
– Dylan, Commented Sep 11, 2018 at 16:51
Yes of course, everything at this point is working fine (components). Jsut problems with mixins, variables and functions. — RomkaLTU
– RomkaLTU, Commented Sep 11, 2018 at 16:53

RomkaLTU · Accepted Answer · 2018-09-12 16:38:06Z

I figure it out. In case youre using vue-cli:

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'
                ]
            }
            ]
        }
    }
};

Don't forget to install sass-resources-loader:

yarn add sass-resources-loader -D

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.

Oleh Karpovych · Accepted Answer · 2023-04-19 12:23:18Z

0

Solution from @RomkaLTU not worked because loaders order wasn't correct. This loaders ordering working in my case.

 const path = require("path");
 
 const loader = {
   loader: "sass-resources-loader",
   options: {
     resources: path.resolve(__dirname, "./src/assets/styles/main.scss"),
   },
 };
 
 module.exports = defineConfig({
   configureWebpack: {
     module: {
       rules: [
         {
           test: /\.scss$/,
           use: ["sass-loader", loader],
         },
       ],
     },
   },
 });

edited Apr 19, 2023 at 12:23

answered Apr 19, 2023 at 12:21

Oleh Karpovych

11 bronze badge

Collectives™ on Stack Overflow

How to use Bootstrap mixins in VueJS components

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related