vue-cli-plugin-sass-resources-loader

vue-cli-plugin-sass-resources-loader

Vue CLI 3.x plugin for sass-resources-loader.

Install

First you need to install @vue/cli globally.

Then create a project add add the sass-resources-loader plugin:

vue create hello-world
cd hello-world
vue add sass-resources-loader

Default resource file ./src/assets/variables.css will be used. you can modify it later via vue.config.js.

module.exports = {
    chainWebpack: config => {
        const ofs = ['vue-modules', 'vue', 'normal-modules', 'normal'];
        const cssRules = config.module.rule('css');
        const postRules = config.module.rule('postcss');

        const addSassResourcesLoader = (rules, type) => {
            rules.oneOf(type).use('sass-resoureces-loader').loader('sass-resources-loader').options({
                resources: './src/assets/css/var.css' // your resource file or patterns
            });
        };
        ofs.forEach(type => { addSassResourcesLoader(cssRules, type); addSassResourcesLoader(postRules, type) });
        return config;
    }
}