Element 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！！！ 我成功地将bundle css大小减小到495kb（样式非常庞大），只需导入主题中实际使用的SASS组件文件即可。

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

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

- guts

---

到目前为止有任何解决方案吗？我也遇到了同样的问题。 - alabama

Answer 1

我刚刚将theme-chalk样式复制到我的项目中，进行了修改，并从项目中导入，而不是使用Element样式，打包大小还可以。使用官方的Element babel组件(https://github.com/ElementUI/babel-plugin-component)。

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

- Sumuray Petrovich

Answer 2

经过分析，这是我的解释，但没有解决方案...

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

但是，如果您导入整个theme-chalk，您可以检查theme-chalk/src/index中导入的每个文件，它们都有自己的导入，并且其中许多导入多次相同的内容。我很想将旧代码拆分成模块，但没有机会...

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

- alabama