从 vue-cli bundle中排除一些 css 文件

Question

我有一个 vue cli 项目，我正在尝试从捆绑在chunk-vendors.css中排除 css 文件

原因是，我的应用程序包含一个主题文件，该文件覆盖了库的所有样式，并且不再需要这些库的样式

有问题的文件位于node_modules/element-ui/lib/theme-chalk/*.css

我似乎无法在vue.config.js文件中找到需要更改的配置

我的简化vue.config.js：

const prefixer = require('postcss-prefix-selector');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
css: {
extract: true,
loaderOptions: {
postcss: {
// This is a workaround to add specificity to the app's theme
// to correctly override all the rules I'm trying to remove
plugins: () => [
prefixer({
prefix: 'body',
exclude: [/body .*/]
}),
autoprefixer({})
],
// This doesn't seem to do anything
exclude: path.resolve('node_modules/element-ui/lib/theme-chalk')
},
}
},
};

但是文件不会被排除

我应该使用什么选项从我的捆绑包中排除 css 文件？

Answer 1

我想通了，当使用 vue-cli-plugin-element 添加元素 ui 时

该插件在babel.config.js中添加了一些行

module.exports = {
'presets': [
'@vue/cli-plugin-babel/preset'
],
'plugins': [
// The following was added by vue-cli-plugin-element
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
}

通过将其更改为：

module.exports = {
'presets': [
'@vue/cli-plugin-babel/preset'
],
'plugins': [
// The following was added by vue-cli-plugin-element
[
'component',
{
'libraryName': 'element-ui',
'style': false
}
]
]
}

我摆脱了无用的 css 导入