在小程序开发过程中经常使用的主题颜色,头部高度等,这些经常使用的可以使用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文件地址
}
})
网友评论