一、Less/Scss变量换肤
具体实现:
1、初始化vue项目
2、安装插件:
npm install style-resources-loader -D
npm install vue-cli-plugin-style-resources-loader -D
当然也要安装less、less-loader等插件,具体的安装配置,请自行google
3、新建theme.less文件用于全局样式配置。在src目录下新建theme文件夹,在这个文件夹下新建theme.less文件。具体如下:
/src/theme/theme.less // 默认的主题颜色 @primaryColor: var(--primaryColor, #000); @primaryTextColor: var(--primaryTextColor, green); // 导出变量 :export { name: "less"; primaryColor: @primaryColor; primaryTextColor: @primaryTextColor; }
4、配置vue.config.js文件,实现全局使用变量实现换肤
const path = require("path"); module.exports = { pluginOptions: { "style-resources-loader": { preProcessor: "less", patterns: [ // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径 path.resolve(__dirname, "./src/theme/theme.less"),