前端换肤&&less

PaulRen1024

已于 2024-02-27 16:48:47 修改

阅读量285

点赞数

文章标签：前端 less javascript

于 2023-03-22 15:00:06 首次发布

本文链接：https://blog.csdn.net/PaulR/article/details/129706020

版权

文章介绍了如何在Vue项目中配置less，设置全局样式文件，以及创建和修改不同颜色主题的方法。通过安装相关插件，配置vue.config.js，创建default.less文件和themesList.js，然后在themeConfig.js中定义修改主题颜色的方法，实现主题的切换功能。

摘要由CSDN通过智能技术生成

文章目录

1、安装相关插件

npm install style-resources-loader -D
npm install vue-cli-plugin-style-resources-loader -D

2、安装less

npm install less-loader --save
npm install less --save

3、配置默认的样式文件

1）在src下新建theme文件夹
2）在theme文件夹下新建default.less文件
3）配置系统默认主题颜色 颜色变量为 ’ @primaryColor ‘
	@primaryColor: var(--primaryColor, #ffb900) // 默认的主题颜色
	// 导出变量
	:export {
	  name: "less";
	  primaryColor: @primaryColor;
	}

4、还需再vue.config.js里配置下全局less样式文件路径

const path = require("path")
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        path.resolve(__dirname, "./src/theme/default.less"),
      ],
    },
  },
};
注意：
	1）修改了config文件需要重启项目才能生效
	2）就可以在项目的任何地方使用我们预先定义的less变量了

5、设置不用颜色的主题

1）在src下新建theme文件夹下的 default.less 文件同级新建一个themesList.js
export const themes = {
  // 默认主题色
  default: {
    primaryColor: '#ffb900',
  },
 
  // 公安蓝
  publicBlue: {
  	primaryColor: '#3E71F9'
  }
};

6、创建修改主题颜色的方法

1）在src下新建theme文件夹下的 default.less 文件同级新建一个themeConfig.js
2）themeConfig.js中引入 themesList.js import { themes } from "./themesList";
3）创建方法并导出
	// 修改页面中的样式变量值
	const changeStyle = (obj) => {
	    for (const key in obj) {
	        document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key])
	        console.log(key, obj, document.getElementsByTagName('body'))
	    }
	}

	// 改变主题的方法
	export const setTheme = (themeName) => {
		// 保存主题到本地，下次进入使用该主题
		localStorage.setItem('theme', themeName)
		const themeConfig = themes[themeName]
		// 如果有主题名称，那么则采用我们定义的主题
		if (themeConfig) {
			localStorage.setItem('primaryColor', themeConfig.primaryColor) // 保存主题色到本地
			changeStyle(themeConfig) // 改变样式
		} else {
			const themeConfig = {
				primaryColor: localStorage.getItem('primaryColor')
			}
			changeStyle(themeConfig)
		}
	}

7、引入并修改主题

在xxx.vue中
<div @click=changeTheme>修改主题颜色</div>
import { setTheme  } from '@/theme/theme'
<methods>
	changeTheme () {
		setTheme('publicBlue') // 公安蓝
	}