ANT-Design-Vue Switching Topics + Scribing + Custom Skin + Less Dynamic Loop

tags: VUE vue.js less front end Replace skin

Core core ideas:

Dynamically change skin variables with LESSJS
window.less.modifyVars(
{
    "primary-color": "red",
})

Ant skin care:

Use the Vue file stream, read the style of Ant, then write it into a new Less file, then add your own Less to the final Less file, then quote this big file.

Installation dependence

npm i antd-theme-generator --save

Main.js references Ant's Less style

// introduce ANTD
import Antd from 'ant-design-vue';
import "ant-design-vue/dist/antd.less";

Core Core Code Structure

theme.js

const fs = require("fs");
const path = require('path');


const { generateTheme } = require('antd-theme-generator');
const options = {};
 // The location of the generated theme.less file
const outputFilePath = path.join(__dirname, '../../../static/theme.less');
 / / Custom Style
const cusCssFilePath = path.join(__dirname, '../cus-theme.less');

generateTheme({
     // Node_Modules path in ANTD
  antDir: path.join(__dirname, '../../../node_modules/ant-design-vue'), 
     // styles Corresponding directory path, need and the following Variables.less in a folder
  stylesDir: path.join(__dirname, '../'), 
     // The entrance file of the Less variable, the variables defined in Variables.less, must be defined in Themevariables
  varFile: path.join(__dirname, '../variables.less'), 
     / / You want to dynamically change the list of variables
  themeVariables: ['@primary-color', '@header-item-hover-color', '@header-back-color'], 
  outputFilePath: outputFilePath,
  customColorRegexArray: [/^color\(.*\)$/],
})
  .then(res => {
         Console.log ('Configuration Subject Success');
         / / Custom style combined with ANT theme styles
         // Read the extracted ANT style
    const themeCss = fs.readFileSync(outputFilePath).toString();
         // Read custom CSS
    const cusCss = fs.readFileSync(cusCssFilePath).toString();
    fs.writeFileSync(outputFilePath, themeCss + cusCss);
         / / Re-override themecss
         Console.log (` Theme coverage is successful. OutputFile: $ {outputfilepath}`
  })
  .catch(res => {
         Console.log ('Configuration Topic Failed ";
  });

variables.less

// Plug-in default topic variable + these variables must be defined in the Memejs
 @primary-color: # 1890ff; // Global main color
 / / Custom Style
 @Header-item-hover-color: blue; // Head item floating color
 @Header-back-color: # 1890ff; // head color

cus-theme.less

// Custom style + can be used in the subject pattern of variables in Variables + Ant
.ant-layout-header {
    background-color: @header-back-color;
    .header-item:hover{
        background-color: @header-item-hover-color;
    }
}

Package.json is set to start the stationjs during the startup, generate all the styles to the Static folder

"scripts": {
    "dev": "node src/theme/js/theme.js && webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node src/theme/js/theme.js && node build/build.js"
  },

Then register in the Index page

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>
    <%=process.env.TITLE %>
  </title>
</head>

<body>
  <div id="app"></div>
     <! - Custom Topic Start ->
  <link rel="stylesheet/less" type="text/css" href="/static/theme.less" />
  <script>
    window.less = {
      async: false,
      env: "production",
    };
  </script>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> -->
  <script type="text/javascript" src="/static/less.min.js"></script>
     <! - Custom Topic End ->
</body>

</html>

Switch with code

window.less.modifyVars({
    "primary-color": "red",
    "header-item-hover-color":"red",
    "header-back-color":"red"
})
.then((res) => {
    Console.log ("success");
})
.catch((res) => {
         Console.log ("error");
});

Default style

Enter the switching code, can change casually

The core is solved, the current theme is based on the localstore process, and there is not much to say, the climbing road is slow, the reference + tries to eat this function for two or three days, the following is the reference article


 [Run] https://www.jianshu.com/p/68b732de8f1c
 [Thinking] easiest peeling https://blog.csdn.net/weixin_33861800/article/details/93171126?utm_term=antdesignpro%E4%BF%AE%E6%94%B9color.less&utm_medium=distribute.pc_aggpage_search_result.none- Task-blog-2 ~ all ~ sobaiduweb ~ default-3-93171126 & spm = 3001.4430
https://blog.csdn.net/sunhuaqiang1/article/details/100619715?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3
https://segmentfault.com/a/1190000019294036
https://blog.csdn.net/qq_39953537/article/details/89029868
https://www.cnblogs.com/yilei-zero/p/13782053.html
https://blog.csdn.net/qq_39953537/article/details/91047839
https://www.cnblogs.com/colinliu666/p/15180598.html
https://blog.csdn.net/lxy869718069/article/details/104000240
https://www.jb51.net/article/168632.htm
https://segmentfault.com/a/1190000016047076
https://www.cnblogs.com/leiting/p/11203383.html

Intelligent Recommendation

Vue-CLI2 + ANT-Design-Vue Customized Topics

The project directory built into the Ant-Design-Vue. Vue-CLI2 based on Vue-CLI2 is as follows: 1. Install ANT-Design-Vue. 2. Introduce components and patterns in src / main.js 3. Install the resolutio...

Vue-CLI Ant-Design-Vue Customized Topics

New file in the project root of Vue.config.js Do not take effect? If you are passing'ant-design-vue/dist/antd.css' Introducing style, changeant-design-vue/dist/antd.less The most important thing is th...

Ant Design Custom Topics Modifyvars Invalid Reason

Ant Design's custom topic config-overrides.jsFile The above writing, but modifyvars has no effect, it may be referenced under specific components.import 'antd/dist/antd.css'Instead ofimport 'antd/dist...

Vue + How to achieve less switching function of the skin Lite

Benpian talk about the core! Benpian talk about the core! Benpian talk about the core! project uses vue-cli + element structures, the control section uses skin hungry what color selector. Insignifican...

Ant Design Vue Tree Control Custom Icon and Dynamic Change

Effect Expand the folder Code If you need to change the icon of the directory node If useful, please give your younger brother a good support! Thank you...