Monday 31 December 2018

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

Using @vue/cli 3.x and am modifying my vue.config.js slightly. I'm wanting 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'v 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.



from Vue.js CLI 3 - how can I create a vendor bundle for css/sass?

No comments:

Post a Comment