使用@vue/cli
3.x,我对vue.config.js
进行了一些修改。我想拥有单独的CSS文件,例如app.css
和vendor.css
(从Sass编译)-类似于其配置为处理JavaScript的方式。我不确定如何设置适当的配置来实现这一目标。我是否错误地加载了文件?完全缺少标记吗?
// vue.config.js
module.exports = {
// [...]
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
shared: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
enforce: true,
chunks: 'all',
}
}
}
}
}
};
我的构建结果在...
dist
├── css
| └── app.css
├── js
| ├── app.js
| └── vendor.js
app.css
包括我通过node_modules
导入的所有。我的主要App.vue
组件中的样式导入如下:<style lang="scss">
@import '../node_modules/minireset.css/minireset.sass';
</style>
// [...]
我期望的结果是以下结构,其中提取了“供应商” CSS/Sass ...
dist
├── css
| ├── app.css
| └── vendor.css
├── js
| ├── app.js
| └── vendor.js
我查看了MiniCssExtractPlugin,其中第一句话陈述了以下内容...
但是我没有找到在Vue.js生态系统中惯用的方法的示例。我也尝试将以下内容添加到我的
vue.config.js
中,但似乎没有任何效果...module.exports = {
// [...]
css: {
extract: {
filename: 'css/[name].css',
chunkFilename: 'css/[name].css',
},
},
};
我还发现Vue SSR Guide | CSS Management应该是本垒打的解释,但它使用了
webpack.optimize.CommonsChunkPlugin
,而webpack.optimize. SplitChunksPlugin已被弃用,而导致ojit_a抛出构建错误...最佳答案
vue.config.js
还允许您使用chainWebpack
方法。可能更可取,因为它允许您修改vue-cli配置。使用configureWebpack
会完全覆盖默认配置,这可能是与Sass配合使用时出现问题的一部分。
此配置仅适用于纯CSS,但与您的配置非常相似。
刚刚尝试将某些Sass嵌入到某些样式块中,就可以将供应商的CSS从应用程序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
}
}
});
}
};
更新
还需要从
@import '../node_modules/minireset.css/minireset.sass';
块中拉出style
和其他import语句,并将其放入vue组件的script
块中:// your component file
<script>
import "minireset.css/minireset.sass";
// rest of script
</script>
该文件仍将导入,并在下面的样式栏中使用。
我的导出包括一个vendor。[hash] .css和一个app。[hash] .css文件。该应用程序文件具有样式块的内容。由于我使测试应用程序简单易用,并适合您的用例,因此供应商文件仅包含来自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}
Vue应用程序here的Git repo 。 sass文件的导入在
HelloWorld.vue
中。