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

一、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"),