Element UI customize sass variables Element UI customize sass variables vue.js vue.js

Element UI customize sass variables


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


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