[youzan/vant]Vue cli 3 如何定制主题颜色

我也遇到相同问题，希望可以快速找到解决方案

我定位到问题是 postcss-theme-variables 插件并未正常工作

@gaozhe3321 我加入 postcss-import 修复了这个问题

我的 postcss 配置:

const vars = {
  red: '#F60',
  gray: '#CCC',
  blue: '#03A9F4'
}

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-theme-variables': {
      vars,
      prefix: '$'
    },
    precss: {},
    'postcss-calc': {},
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    }
  }
}

我试了下，可以通过在项目根目录新建vue.config.js来修改主题

module.exports = {
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    green: '#5D81B1',
                }
            }
        }
      }
  }

我试了下，可以通过在项目根目录新建vue.config.js来修改主题

module.exports = {
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    green: '#5D81B1',
                }
            }
        }
      }
  }

为什么我也是这样配置的，却不生效呢？

@shenxiaai 请参考 https://github.com/youzan/vant-demo 仓库，里面有完整的配置

我试了下，可以通过在项目根目录新建vue.config.js来修改主题

module.exports = {
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    green: '#5D81B1',
                }
            }
        }
      }
  }

为什么我也是这样配置的，却不生效呢？

除了 vue.config.js ，还要修改 babel.config.js 中的配置，见 https://github.com/youzan/vant-demo/blob/master/vant/theme/babel.config.js

我试了下，可以通过在项目根目录新建vue.config.js来修改主题

module.exports = {
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    green: '#5D81B1',
                }
            }
        }
      }
  }

为什么我也是这样配置的，却不生效呢？

除了 vue.config.js ，还要修改 babel.config.js 中的配置，见 https://github.com/youzan/vant-demo/blob/master/vant/theme/babel.config.js

你解决这个问题了吗？我也遇到了相同的问题，babel.config.js也是按照文档配置了的

我试了下，可以通过在项目根目录新建vue.config.js来修改主题

module.exports = {
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    green: '#5D81B1',
                }
            }
        }
      }
  }

为什么我也是这样配置的，却不生效呢？

除了 vue.config.js ，还要修改 babel.config.js 中的配置，见 https://github.com/youzan/vant-demo/blob/master/vant/theme/babel.config.js

你解决这个问题了吗？我也遇到了相同的问题，babel.config.js也是按照文档配置了的

修改后有试过重新 run 项目吗？