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

Question

我有一个 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 个文件？

Answer 1

我想通了，当添加 element-ui 与 vue-cli-plugin-element

该插件向 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 导入

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

Exclude some css files from a vue-cli bundle

webpack

vue-cli

vue-cli-3