- Note how to configure multiple topics using Sass
Install the SASS
- The following SASS dependencies are required. Sass-resources-loader is used to support global access to SASS variables
"DevDependencies" : {" node - sass ":" ^ 4.14.1 ", "sass - loader" : "^ 10.1.0", "sass - resources - loader" : "^ 2.1.1",},Copy the code
Define the theme – the map
- I created a theme folder in the SRC directory
- The contents of the _theme. SCSS file look like this. I have defined two styles of theme, one light color and one dark color
// define theme-map $lightTheme: (mainContainerBg: # f3f3F3, blockBg: $FFF, mainTextColor: #666); $darkTheme: ( mainContainerBg: blue, blockBg: $000, mainTextColor: #fff ); $themes: ( light: $lightTheme, dark: $darkTheme );Copy the code
- You can define a variable. SCSS that configures some base colors and then use the sass color function to generate various colors ~
Defining the theme method
- The handler_themes. SCSS file is marzipan
@import './_themes.scss'; @mixin themeify($themes: $themes) {@each $theme-name, $theme-map in $themes {//$theme-name, $theme-map in $themes {//$theme-name, $theme-map in $themes //! $theme-map: $theme-map! global; // #{} is a sass interpolation. // @content is a mixer slot. Slot like vue [data-theme="#{$theme-name}"] & {@content; Themed ($Key) {@themed ($theme-map, $Key); Function isStyle($key) {//map-get returns the map value based on the corresponding key value @return map-get($theme-map, $key); }; @mixin styles ($style, $key) { @include themeify { #{$style}: isStyle($key); }} // Add! important @mixin stylesIm ($style, $key) { @include themeify { #{$style}: isStyle($key) ! important; }}Copy the code
Configuration SASS
- Add ~ to vue.config.js
ChainWebpack (config) {// SCSS global const oneOfsMap = config.module.rule(' SCSS ').oneofs.store oneofsmap.foreach (item => { item .use('sass-resources-loader') .loader('sass-resources-loader') .options({ resources: ['./src/theme/handler_themes.scss'] }) .end() }) }Copy the code
Introduced the global
- Introduced in main.js
import './theme/handler_themes.scss'
Copy the code
Use (chestnuts, for example)
- Add data-theme=”light” or data-theme=”dark”~ to the body tag or any other page div you want to add
<div data-theme="light"></div>
Copy the code
Style Style (SCSS file)
div { @include styles('color', 'mainTextColor'); @include themeify { border: 1px solid themed(elInputBorder); }}Copy the code
Okk, done
- This way to configure the two styles, the overall writing is still more troublesome, there are too many variables to configure. If there is a good UI design, with good color in advance, efficiency will be very high.