Vue使用Less与Scss实现主题切换方法详细讲解

大富大贵7

于 2024-03-16 15:42:25 发布

阅读量450

点赞数

CC 4.0 BY-SA版权

分类专栏：程序员知识储备1 程序员知识储备2 程序员知识储备3 文章标签：经验分享

本文链接：https://blog.youkuaiyun.com/Sapphire521/article/details/136763873

程序员知识储备1 同时被 3 个专栏收录

930 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

程序员知识储备2

929 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

程序员知识储备3

929 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何在Vue项目中利用Less和Scss实现动态主题切换。首先，通过初始化项目和安装相关插件，然后在theme.less文件中配置全局样式变量。在vue.config.js中配置加载这些变量，使项目可以使用它们。接着，创建model.js存储默认主题，并在theme.js中实现动态切换功能。对于element-UI组件，文章说明了如何修改element-variables.scss文件，结合store中的settings.js和ThemePicker组件，完成组件的换肤功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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: [
        // 这个是加上自己的路