DEV Community

loading...

Overriding the Default Theme in Element UI with SCSS

sirtimbly profile image Tim Bendt ・2 min read

If you want to use the Element UI library for Vue (and you should) then you will quickly find yourself overriding specific styles in order to get it looking just right. They used to offer a tool for copying and generating a custom theme .css file to include in your project. This was a pain because it required another tool dependency to generate it, and that theme was completely isolated from any other styles preprocessors you might be using.

Element used to use CSS custom properties and PostCSS for pre-processing but they have migrated to SCSS now, and this makes it possible for us to tap into their variables if we also use SCSS/Sass in our project.

I have a big file full of variables at src/styles/_settings.scss - this file gets included at the top of all of my component scss files - and injected into each Vue scss style block in any single file components that use the lang="scss" attribute. This settings file is where I set up my color palette and create all my global variables that get used throughout the rest of the project.

Instructions

First of all it's important to note that you should not import the element-ui theme css file directly like they show on the instructions.

// DON'T ADD THIS LINE
import 'element-ui/lib/theme-chalk/index.css';
Enter fullscreen mode Exit fullscreen mode

Instead you will import the scss files one at a time when you need them inside of your own components.

Add the following variable definition into your settings file.

$__color-primary: $my-primary-color; // primary color override for Element-UI (underscores are interchangeable with hyphens)
Enter fullscreen mode Exit fullscreen mode

Let's say you are writing a custom "Tabs" component. You are going first import your variables at the top of the file.

@import "../../../styles/settings";
Enter fullscreen mode Exit fullscreen mode

Then import the element-ui scss files.

@import "~element-ui/packages/theme-chalk/src/tabs";
@import "~element-ui/packages/theme-chalk/src/tab-pane";
Enter fullscreen mode Exit fullscreen mode

Then you will need to write your custom tab selectors and tie it to the class names of the tabs the element-ui vue component will be using internally.

.tabs, .el-tabs__nav {
   // ...
   .tab, .el-tabs__item {
    // ...
    }
}
Enter fullscreen mode Exit fullscreen mode

Any time you import the element-ui scss files your variables will override their variables. You can see a list of all their theme variables here. When you override their variables you might get a parsing error from scss-lint if you have it installed. You need to change the leading two dashes (after the $) into underscores. Starting variable names with two dashes is the syntax for css custom properties, but it throws errors in some scss parsers. Luckily underscores and dashes are interchangeable in Sass variable names, for reasons that are now lost to the sands of time.

Discussion (6)

pic
Editor guide
Collapse
tranghaviet profile image
Hà Viết Tráng

My solution with scss

$--font-path: "~element-ui/packages/theme-chalk/src/fonts";
@import "~element-ui/packages/theme-chalk/src/index";

Declare $--font-path to prevent fonts not found error. Then we can override any variables, classes we want

Collapse
fabd profile image
Fabrice D. • Edited

If you use babel-plugin-component, it looks like it selectively includes the relevant styles from the theme-chalk folder, as long as you import the component itself.

(ie. with the On demand import)

Collapse
siberiadev profile image
siberiadev

Thanx for the awesome article
Could you tell me why I shouldn't import whole element ui styles, as they suggest all users?
Just want to understand the reason. Thank you again

Collapse
sirtimbly profile image
Tim Bendt Author

Simply for modularization. Why ship unused CSS code to your users? The element project went to the trouble of modularizing their source CSS files so I like the idea of trimming my builds down as small as possible. One thing to note is that since we use things that aren't part of the "dist" folder there's no guarantee it will stay in the same place in future versions.

Collapse
swsalim profile image
Yuyu

Great article. I found this extremely useful considering how much time I've spent tinkering with the modularity of Element UI.

Collapse
yurichandraa profile image
Yuri Chandra

I just found this article very useful for those who having huge bundle size just like me. Thanks!