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

This article mainly introduces "how to use webpack4 to achieve skin change function in vue-cli3 project". In daily operation, I believe many people have doubts about how to use webpack4 to achieve skin change function in vue-cli3 project. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to use webpack4 to achieve skin change function in vue-cli3 project". Next, please follow the editor to study!

First of all, we use vue-element-admin, an open source background management system project to do demo demonstration, in order to facilitate secondary development, download vue-admin-template to develop.

/ / download vue-admin-templateclone https://github.com/PanJiaChen/vue-admin-template.gitcd vue-admin-templatenpm installnpm run dev from github

The effect after a successful operation

Install the style-loader processor

Because the vue-admin-template project has added sass-loader dependencies, we don't have to install it again, it's already installed in the previous step.

Npm install style-loader-save-dev

Create a theme file

Create a theme-chalk and theme-light theme folder under the src directory

Create the index.useable.scss file in two theme directories

Write styles in index.useable.scss

/ / theme-chalk/index.useable.scssbody {background: red;} / / theme-light/index.useable.scssbody {background: green;}

At this point, our theme styles have been built, and now we are going to apply the theme.

Add style-loader/useable to vue.config.js

The configuration of vue-cli2 root vue-cli3 is quite different. I encountered a lot of holes in the process of configuration, because there is no webpack.config.js file in vue-cli3, so we cannot configure webpack according to the old documentation. We need to be familiar with cli3's webpack-chain to modify the configuration chain, but the documentation is very few, and the process of configuration is extremely difficult.

Modify the webpack configuration by chainWebpack chain in the configuration file and you can successfully apply loader. Don't say much, just go to the code.

/ / skinning loader const scss = config.module.rule ('scss'). ToConfig (); const useable = {. Scss.oneOf [3], test: /\ .useable.scss $/}; useable.use = [. Useable.use]; useable.use [0] = {loader:' style-loader/useable'}; config.module.rule ('scss'). Merge ({oneOf: [useable]})

Working with themes

After all the preparatory work has been done, let's start using theme styles.

Why do you want to use style-loader to change your skin? Because style-loader provides useable as an API, you can load and delete link files dynamically. Please check out style-loader for details.

In the src directory, create the theme.js file

Const cache = {}; const themeAction = {chalk () {if (! cache.chalk) {cache.chalk = import ('. / styles/theme-chalk/index.useable.scss');} return cache.chalk;}, light () {if (! cache.light) {cache.light = import ('. / styles/theme-light/index.useable.scss');} return cache.light;}}; let current = null Async function setTheme (theme) {if (themeAction [theme]) {const style = await themeAction [theme] (); if (current) {current.unref ();} style.ref (); current = style;}} window.setTheme = setTheme;export default setTheme

In main.js, introduce theme.js.

Import setTheme from'. / theme'// uses the theme setTheme ('chalk')

Restart the service to see the effect

At this point, the study on "how to use webpack4 in the vue-cli3 project to achieve skin replacement function" 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.