Question

我有一个使用Vue.js和element-ui的项目。我想自定义element-ui SASS变量以更新主题，我也想在我的Vue组件样式中使用这些变量。

我设法创建了自己的SASS文件，将其导入到node_modules / element-ui / lib / theme-chalk / index.scss中（例如：https://element.eleme.io/#/en-US/component/custom-theme#update-scss-variables-in-your-project）

但是我的捆绑包大小爆炸了。对于CSS，它从44kb变为800kb ！！！在仅导入主题中确实使用的SASS组件文件时，我设法将bundle css的大小减小到495kb（样式巨大）。

我这样使用babel-plugin-component：

"plugins": [
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]

Answer 1

分析问题后，这是我的解释，没有解决方案...

此问题是Element UI的模块化。您可以只导入所需的组件，因此它们的样式文件将被正确导入。

但是，如果您导入整个主题粉笔，则可以检查theme-chalk/src/index中每个文件的导入方式，这些文件都有自己的导入内容，其中很多文件具有相同的导入次数。我很乐意将遗留代码拆分成模块，但是没有机会...