Vue.js CLI 3 - how can I create a vendor bundle for CSS/Sass?

Question

Using @vue/cli 3.x and I have modified my vue.config.js slightly. I want to have separate CSS files such as app.css and vendor.css (transpiled from Sass) - similar to how its configured to treat the JavaScript. I am unsure how to set the proper config to achieve this. Am I loading my files incorrectly? Missing the mark entirely?

// vue.config.js
module.exports = {
  // [...]
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          shared: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            enforce: true,
            chunks: 'all',
          }
        }
      }
    }
  }
};

My where build results in...

dist
├── css
|   └── app.css
├── js
|   ├── app.js
|   └── vendor.js

app.css includes all I've imported through my node_modules. My style import is as follows in my main App.vue component...

<style lang="scss">
  @import '../node_modules/minireset.css/minireset.sass';
</style>

// [...]

My desired result is the following structure, where the "vendor" CSS/Sass is extracted out...

dist
├── css
|   ├── app.css
|   └── vendor.css
├── js
|   ├── app.js
|   └── vendor.js

---

I've looked into the MiniCssExtractPlugin where the first sentences states the following...

This plugin extracts CSS into separate files

But I've found no examples of how to do it idiomatically in the Vue.js ecosystem. I've also tried to add the following to my vue.config.js, but nothing seems to take effect...

module.exports = {
  // [...]
  css: {
    extract: {
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].css',
    },
  },
};

---

I've also found what should have been a home run explanation in the Vue SSR Guide | CSS Management, but it uses webpack.optimize.CommonsChunkPlugin which has been deprecated in favor of webpack.optimize. SplitChunksPlugin, throwing a build error...

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

Answer 1

The vue.config.js also lets you use a chainWebpack method. It might be preferable because it allows you to modify the vue-cli config. Using configureWebpack overwrites the default config entirely, which might be part of the problem in regards to getting yours to work with Sass.

This config is for pure CSS only, but is fairly similar to what you have.

Just tried this with some Sass embedded into some style blocks, and it breaks up the vendor css from the app css.

module.exports = {
    chainWebpack(config) {
        config
            .output.chunkFilename('[name].bundle.js').end()
            .optimization.splitChunks({
                cacheGroups: {
                    vendorStyles: {
                        name: 'vendor',
                        test(module) {
                            return (
                                /node_modules/.test(module.context) &&
                                // do not externalize if the request is a CSS file
                                !/\.css$/.test(module.request)
                            );
                        },
                        chunks: 'all',
                        enforce: true
                    }
                }
            });
    }
};

Update

It's also necessary to pull out your @import '../node_modules/minireset.css/minireset.sass'; and other import statements out of the style block and put it in the script block of your vue component:

// your component file
<script>
    import "minireset.css/minireset.sass";
    // rest of script
</script>

The file will still be imported and used in your style block below.

My exports include a vendor.[hash].css and an app.[hash].css file. The app file has the content of the style blocks. Since I kept my test app simple and to your use case, the vendor file contains only the style info from minireset:

// vendor.[hash].css
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}audio,embed,iframe,img,object,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

Git repo of vue app here. The import of the sass file is in HelloWorld.vue.