title: Element UI customize sass variables
body: <p>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.</p>
  
  <p>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 : <a href="https://element.eleme.io/#/en-US/component/custom-theme#update-scss-variables-in-your-project" rel="noreferrer">https://element.eleme.io/#/en-US/component/custom-theme#update-scss-variables-in-your-project</a>)</p>
  
  <p>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.</p>
  
  <p>I use the babel-plugin-component like this : </p>
  
  <pre><code>"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
  </code></pre>