解决vant-UI库修改样式无效的问题

解决vant-UI库修改样式无效的问题，需要先了解vant-UI库的样式覆盖机制。vant-UI库的样式使用了CSS Modules技术，每个组件的样式都被编译后生成对应的唯一类名，以避免样式冲突。在修改vant-UI库的样式时，无法直接修改组件已有的样式，需要使用深度选择器进行样式覆盖。

攻略：

1. 安装 postcss-pxtorem 插件

postcss-pxtorem 插件可以将 px 单位自动转换为 rem 单位，方便在移动端开发时进行适配。

npm install postcss-pxtorem --save-dev 

1. 修改项目根目录下的 postcss.config.js 文件

在文件中添加 postcss-pxtorem 插件的配置

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      "rootValue": 37.5,
      "propList": ["*"]
    }
  }
}

1. 修改 webpack 配置

在项目根目录下的 vue.config.js 文件中，添加 configureWebpack 配置如下：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            {
              loader: 'sass-loader',
              options: {
                implementation: require('sass')
              }
            },
            {
              loader: 'less-loader',
              options: {
                lessOptions: {
                  modifyVars: {
                    // 在此处修改vant组件库样式
                    // 例如修改按钮颜色为红色：
                    'button-primary-background-color': 'red'
                  }
                }
              }
            }
          ]
        }
      ]
    }
  }
}

示例1：修改 vant-button 样式

1. 安装 vant UI 库

npm i vant -S

1. 修改 webpack 配置

在 vue.config.js 中添加以下配置：

module.exports = {
  configureWebpack: (config) => {
    config.module.rules.forEach((rule) => {
      if (
        String(rule.test) ===
        String(
          /\\.module\\.(css|scss|sass|less)$/i
        )
      ) {
        rule.oneOf[0].use.push({
          loader: "style-resources-loader",
          options: {
            patterns: [
              // vant 样式
              path.resolve(
                __dirname,
                "./src/assets/style/vant.less"
              ),
            ],
          },
        });
        return;
      }
    });
  },
};

其中，添加了 style-resources-loader 模块，用于打包 vant 样式。

1. 在项目中使用 vant-button 组件

在 .vue 文件中添加以下代码：

<template>
  <van-button class="my-button">自定义样式按钮</van-button>
</template>

<style lang="scss" scoped>
.my-button {
  color: #f00; // 改变按钮文字颜色
  background-color: #ff0; // 改变按钮背景色
}
</style>

1. 重新编译并查看效果

示例2：修改 vant-cell 样式

1. 修改 webpack 配置

同示例1，在 vue.config.js 中添加 style-resources-loader 模块，用于打包 vant 样式。

1. 修改 vant-cell 样式

在 .vue 文件的 style 标签中添加以下代码：

<style lang="less" scoped>
::v-deep .van-cell__title {
  color: green;
}
</style>

其中，::v-deep 是深度选择器，用于覆盖 vant-cell 组件中的标题样式。

1. 重新编译并查看效果

以上两个示例均为使用深度选择器修改 vant UI 库组件样式的方法。当然，你也可以通过修改 less 变量的方法来改变整体风格，方法为将需要修改的变量值覆盖即可。