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 }]]
};