Element UI 自定义 sass 变量

Posted 2023-02-22

【中文标题】Element UI 自定义 sass 变量

【英文标题】：Element UI customize sass variables

【发布时间】：2019-04-03 18:50:25

【问题描述】：

我有一个使用 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"
    
  ]
]

【问题讨论】：

到目前为止有什么解决方案吗？我遇到了同样的问题。

【参考方案1】：

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

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

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

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

【参考方案2】：

我刚刚将主题粉笔样式复制到我的项目中，对其进行了更改，然后从项目中导入而不是处理元素样式，包大小很好。使用官方 Element babel 组件（https://github.com/ElementUI/babel-plugin-component）作为

module.exports = 
  plugins: [['component',  style: false ]]
;