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