元素 UI 自定义 sass 变量

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 组件文件时，我设法将包 css 大小减少到 495kb（样式巨大）。

我像这样使用 babel-plugin-component ：

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

Answer 1

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

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

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

您可以使用类似的东西：https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-once-importer