使用 @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',
}
}
}
}
}
};
我的 where 构建结果...
dist
├── css
| └── app.css
├── js
| ├── app.js
| └── vendor.js
app.css
包括我通过 node_modules
导入的all。我的主要 App.vue
组件中的样式导入如下...
<style lang="scss">
@import '../node_modules/minireset.css/minireset.sass';
</style>
// [...]
我想要的结果是以下结构,其中“vendor ”CSS/Sass 被提取出来...
dist
├── css
| ├── app.css
| └── vendor.css
├── js
| ├── app.js
| └── vendor.js
我查看了 MiniCssExtractPlugin其中第一句话陈述以下内容......
This plugin extracts CSS into separate files
但我没有找到在 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 ,抛出构建错误...
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
最佳答案
vue.config.js
还允许您使用 chainWebpack
方法。它可能更可取,因为它允许您修改 vue-cli 配置。使用 configureWebpack
会完全覆盖默认配置,这可能是让你的配置与 Sass 一起工作的问题的一部分。
此配置仅适用于纯 CSS,但与您所拥有的非常相似。
刚刚尝试将一些 Sass 嵌入到一些样式 block 中,它将 vendor 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';
和其他 import 语句从 style
block 中取出并将其放在您的 vue 组件的 script
block 中:
// your component file
<script>
import "minireset.css/minireset.sass";
// rest of script
</script>
该文件仍将被导入并在下面的样式 block 中使用。
我的导出文件包括一个 vendor.[hash].css 和一个 app.[hash].css 文件。应用程序文件包含样式 block 的内容。由于我让我的测试应用程序简单且适合您的用例,因此 vendor 文件仅包含来自 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 app的Git repo here . sass文件的导入在HelloWorld.vue
中。
关于javascript - Vue.js CLI 3 - 如何为 CSS/Sass 创建 vendor 包?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53964974/