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)

 i         


        

Answer 1

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.