vue 项目中使用 Less 函数

Less 本身不支持函数写法,但是做移动端响应式开发需要手动把 px 转成 rem

安装

npm install less-plugin-functions -D

webpack 配置(vue.config.js)

const LessPluginFunctions = require('less-plugin-functions')

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('less')
      .oneOf('vue-modules')
      .use('less-loader')
      .options({
        javascriptEnabled: true,
        plugins: [new LessPluginFunctions()],
      })

    config.module
      .rule('less')
      .oneOf('vue')
      .use('less-loader')
      .options({
        javascriptEnabled: true,
        plugins: [new LessPluginFunctions()],
      })
  },
}

使用

.function {
  .rem(@x) {
    return: @x / x; //配置的参数
  }
}