Overriding the Default Theme in Element UI with SCSS

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';

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)

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";

Then import the element-ui scss files.

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

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 {
    // ...
    }
}

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.