从 vue-cli 包中排除一些 css 文件答案

【问题标题】：Exclude some css files from a vue-cli bundle从 vue-cli 包中排除一些 css 文件
【发布时间】：2020-04-30 05:58:20
【问题描述】：

我有一个 vue cli 项目，我正在尝试将 css 文件排除在 chunk-vendors.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 文件？

【问题讨论】：

标签： webpack vue-cli vue-cli-3

【解决方案1】：

我想通了，当使用 vue-cli-plugin-element 添加 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 导入

【讨论】：