vue vant定制主题

vue-cli 4.x

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: (name) => `${name}/style/less`
    }, 'vant']
  ]
}

如果发现更改不起作用,尝试下把node_modules目录下的.cache目录删掉

vue.config.js less-loader 6.x

const path = require('path')
const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      less: {
        appendData: () => {
          return fs.readFileSync(
            path.resolve(__dirname, "./src/style/theme.less")
          ).toString();
        }
      }
    }
  }
}

less-loader的modifyVars选项已经在6.x版本删掉了

vue.config.js less-loader 5.x

module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 直接覆盖变量
          'text-color': '#111',
          'border-color': '#eee',
          // 或者可以通过 less 文件覆盖(文件路径为绝对路径)
          hack: `true; @import "your-less-file-path.less";`
        }
      }
    }
  }
}

参考

https://youzan.github.io/vant/#/zh-CN/theme

https://github.com/webpack-contrib/less-loader/issues/303

《vue vant定制主题》上有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注