webpack中引用公共less
第一步
npm install sass-resources-loader --save-dev
第二步
然后在build 的utils.js中找到less: generateLoaders(‘less’) 并更改为如下:
less: generateLoaders('less').concat({
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/common.less')
}
})
path.resolve(__dirname, ‘…/src/assets/css/common.less’)路径即为自己对应的公共less文件,修改完配置文件记得重启服务器:npm run dev
第三步
使用:
在less文件中
@sidebar:240px;
@headerHeight:65px;
@bodyMinWidth: 700px;
在组件中
<style lang='less' scoped>
.content {
background:red;
height:auto;
margin-left: @sidebar;
width: calc(100%-@sidebar);
}
</style>