mpvue 全局使用less变量,解决less全局使用undefined问题

在小程序开发过程中经常使用的主题颜色,头部高度等,这些经常使用的可以使用less写成全局变量。但在使用时碰到一些问题,在APP.vue中全局引入定义了变量的less文件在单个页面中使用这些变量会报undefined错误,在单个页面中引入则不会,此处为解决办法

需要安装sass-resources-loader。

npm install sass-resources-loader --save-dev

然后找到build文件夹下面的 utils.js 找到
less: generateLoaders('less')

位置

return {
    css: generateLoaders(),
    wxss: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less').concat({  // 此处为需要修改位置
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/styles/reset.less')
      }
  }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

修改成

less: generateLoaders('less').concat({

   loader: 'sass-resources-loader',
   options: {
     resources: path.resolve(__dirname, '../src/assets/base.less') // 此处为你需要全局引入的less文件地址
   }
})

你可能感兴趣的:(mpvue 全局使用less变量,解决less全局使用undefined问题)