Element UI customize sass variables

Question

I have a project with Vue.js and element-ui. I want to customize element-ui SASS variables to update the theme and I also want to use these variables in my Vue component style.

I managed to do that in creating my own SASS file that import the one in the node_modules/element-ui/lib/theme-chalk/index.scss (like this : https://element.eleme.io/#/en-US/component/custom-theme#update-scss-variables-in-your-project)

But my bundle size exploded. For the CSS it went from 44kb to 800kb !!! I manage to decrease bundle css size to 495kb (style huge) in importing only SASS component files I really use in the theme.

I use the babel-plugin-component like this :

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

Answer 1

I've just copied theme-chalk styles to my project, changed it, and imported from project instead of deal with Element styles, bundle size is fine. Use official Element babel component (https://github.com/ElementUI/babel-plugin-component) as

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

Answer 2

After analyzing the problem this is my explanation without a solution...

The problem for this is the modularity of Element UI. You could import only the components you need and therefore their style files will be imported properly.

But if you import the whole theme-chalk you can inspect how every file in theme-chalk/src/index is imported which have it's own imports and a lot of them have the same imports multiple times. I would love to split the legacy codes in modules, but no chance for that...

You could use something like: https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-once-importer