Vant 自制主题

发表于 | 分类于 |
字数统计: 179 字 | 阅读时长 ≈ 1 分钟

尽管官方有教程，但是还是踩了坑，记录记录！【本次教程针对 vue-cli 2.x】

  1. 安装 插件

    1
    npm i babel-plugin-import -D

  2. main.ts 引入

    1
    import 'vant/lib/index.less'; // 注意是less

  3. build / utils.js 配置 generateLoaders

    1
    2
    3
    4
    5
    6
    7
    8
    9
    less: generateLoaders('less', {
        modifyVars: {
            // 定义自己的文件覆盖，采用绝对路径
            'hack': `true; @import "${path.join(__dirname,'../src/common/style/ResetVant.less')}";`
        }
    }),
        sass: generateLoaders('sass', {
            indentedSyntax: true
        }),

  4. .babelrc 配置

    1
    2
    3
    4
    5
    6
    7
    8
    "plugins": ["transform-vue-jsx", "transform-runtime", [
        "import", {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style": true
        },
        "vant"
    ]]

  5. 新建一个 .less 文件，复制配置文件，更改相关样式，重新编译，即可生效
    img