如何在vue项目中定义公共的less变量,在组件中使用
想把变量抽到一个公共的less文件中,然后在项目的各个组件都可以使用,试了很多方法都报错<style scoped lang="less">@import "../assets/css/common.less";.left-nav{width: 58px;height: 1080px;background: @bg-color}</st...
·
想把变量抽到一个公共的less文件中,然后在项目的各个组件都可以使用,试了很多方法都报错
vue-cli2.x
一,安装loader
npm install sass-resources-loader --save-dev
二,添加代码到build 的utils.js中exports.cssLoaders = function (options) {}中
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/styles/common.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
ps:path.resolve(__dirname, ‘…/src/assets/styles/common.less’)为自己对应的文件
然后后面将 return{} 块中的 less: generateLoaders(‘less’) 替换成上面自定义的函数 less: lessResourceLoader()
最后重启服务 less生效!!
然后发现不需要在main.js里引入,也不需要在app.vue里引入
vue-cli3及以上
安装loader
vue add style-resources-loader
vue.cogfig.js添加以下代码
const path = require("path");//这一段需要自行添加
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, "src/style/global.less")//需要自行添加,这里的路径不要写错了
]
}
}
}
也可以把以上的less路径写成一个index.less,然后在index.less里去@import各个文件
记住!less定义变量时一定要以;结尾
记住!less定义变量时一定要以;结尾
记住!less定义变量时一定要以;结尾
更多推荐
已为社区贡献9条内容
所有评论(0)