Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the method of changing the theme of vue+webpack". In the daily operation, I believe that many people have doubts about the method of changing the theme of vue+webpack. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "what is the method of changing the theme of vue+webpack?" Next, please follow the editor to study!

Requirements: due to business needs, we need to make multiple sets of skin

A survey of the current industry implementation solutions, a variety of good and bad, in this summary of various schemes have advantages and disadvantages and complexity, for everyone to quickly locate the solution in line with their own business, with vue single-page application as the business scenario

Method 1: class switching mode

Achieve:

It is relatively simple to define multiple class in each page that needs to be replaced, and dynamically change the class name according to the runtime identity to load different styles.

Advantages:

There is no need to modify the build tool

The business development process can be implemented without restrictions.

Support for dynamic switching

Disadvantages:

The logic is scattered and coupled in each page, and once it needs to be modified, there are more pages involved in modification.

The code needs to be built in advance and does not support dynamic color modification.

Method 2: the implementation of ElementUI

Achieve:

Use special values for the colors involved in the theme

For example, when UI needs a white # ffffff color value, use a similar eigenvalue color such as # fffffe

/ / replace the default style feature values with variables to replace getStyleTemplate (data) {const colorMap = {'# fffffe': 'text_color'}; Object.keys (colorMap) .forEach (key = > {const value = colorMap [key]; data = data.replace (new RegExp (key,' ig'), value);}); return data;}

Dynamically get the color values that need to be modified while the code is running

For example: need to modify # fffffe = "# ff00ff

/ / obtain the color value to be replaced colors: {text_color:'# ff00ff'} through user operation or API

Find all the style tags on the page and match their color values # fffffe regularly and replace them with # ff00ff

/ / get the default style, which can be obtained from the loaded style or getIndexStyle () {document.querySelectorAll ('style') .forEach (item= > {this.originalStyle + = this.getStyleTemplate (item.textContent);})}, getCssLink () {this.get ('. / cssPath.css') .then (json= > {this.originalStyle = this.getStyleTemplate (json.data);})}

Add a new tag to the page style overrides the default value

/ / replace the default stylesheet and insert the style tag override style writeNewStyle () {let cssText = this.originalStyle; log (cssText) Object.keys (this.colors) .forEach (key = > {cssText = cssText.replace (new RegExp ('(:\\ s+)'+ key,'g'),'$1' + this.colors [key]);}) CssText = cssText.replace (/\ nAccord gMagneur') if (this.originalStylesheetCount = document.styleSheets.length) {const style = document.createElement ('style'); style.innerText = cssText; document.head.appendChild (style);} else {document.head.lastChild.innerText = cssText;}}

Advantages:

Support for dynamic switching

Support for dynamic color values

No need for multiple built-in styles

Disadvantages:

In the process of business development, the color value given by ui needs to be redefined, and business development needs to have certain rules.

Unable to modify background picture

Unable to deal with lazy loading styles, all global styles need to be initialized.

Const ExtractTextPlugin = require ('extract-text-webpack-plugin') / / extract css module: {loaders: [{/ / extract css load test: /\ .css $/, loader: ExtractTextPlugin.extract ({fallback:' style-loader', use: 'css-loader'})} via link. Plugins: [new ExtractTextPlugin ({filename: 'css/ [name] .css' allChunks: true / / package all pages css to the same css file})]

Unable to modify background picture dynamically

Method 3: full construction of multi-topics at compile time

Achieve:

Define multiple sets of styl

When building, we use multiple sets of style themes as independent build portals, and build the theme static file css file.

Dynamically load different theme files when the business is running

Advantages:

Support for dynamic theme switching

Separation of business development styles

Disadvantages of good build performance at compile time:

The configuration of the construction tool is complex, suitable for single-entry applications, and the support for multi-entry is not friendly.

A global less file needs to be defined and introduced in the portal

The business requires additional operations

Optional theme styles can be preloaded with rel= "alternate stylesheet"

Method 4: build selectively at compile time

Achieve:

Built-in multiple sets of skin

Pass in parameters during construction, and load different theme style files according to different build parameters

Advantages:

The configuration of the build tool is relatively simple, and no additional operations are required for the business.

Good support for multi-entry applications

Disadvantages:

Dynamic switching is not supported

Multiple projects need to be built multiple times and need to be supported by the build system

Mode 5: less dynamic variable

Achieve:

Modify the build script to extract all the page less files into the same file

Without compiling less, the page loads the less file directly.

Use less.js to compile less files on the client side

Less: {modifyVars: {}, javascriptEnabled: true}

Advantages:

Support for dynamic switching

Support for dynamic color values

Disadvantages:

Client-side compilation consumes more performance / time

Additional loading of less.js mini file size: 131KB is required

Method 6: css variable

Achieve:

Define variables in the css attribute that needs to be changed

: root {--main-bg-color: pink;} body {background-color: var (--main-bg-color);}

Dynamically modify variables at run time

Document.body.style.setProperty ('- primary','# 7F583F')

Advantages:

Native browser support without additional operation

Support for dynamic color values

Disadvantages:

Low version compatibility is not good ios Safari 9.3, android 5, chrome forAndroid 76

UC, QQ, Baidu and other domestic browsers have poor support.

Method 7: import dynamic loading

Achieve:

Predefined multiple sets of topics in the business

The runtime dynamically loads the corresponding theme according to the variables

If (a) {import ('. / thems/a/base.less')} else if (b) {import ('. / thems/b/base.less')}

Advantages:

Support for dynamic switching

Easy to implement

Disadvantages:

Dynamic color values are not supported

Multiple stylesheets need to be defined globally

Global definition class cannot define variables reference variables in vue style

Mode dynamic color value support variables to achieve complexity compatibility performance maintainability class switching mode is simple good good

The implementation of ElementUI is medium-good and average.

Whether the full construction of multi-topics at compile time is complex and good in general.

Whether selective build at compile time is moderately good or not

Whether the less variable is complex, good or bad

The css variable is moderately poor and good.

Whether the dynamic loading of import is simple and good.

Note:

Dynamic switching: whether it supports switching skins at run time

Dynamic settings: whether to support dynamic skin color setting at run time

Support variables: whether you can define the variable less file globally, and then reference less in different pages, depending on the variables in it, or whether you need to define the global class in the global less file

Implementation complexity: the amount of code that needs to be modified includes build tools and business code

Compatibility: supported by mainstream browsers

Performance: including the size loaded on the first screen of the code, the speed of switching, and whether there will be flickering when switching.

At this point, the study on "what is the method of changing the theme of vue+webpack" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.