转自:https://blog.csdn.net/hani_wen/article/details/81007852
首先安装一个包:
npm install sass-resources-loader --save-dev
适用于sass,less等引入全局文件。
然后在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)
}
}
path.resolve(__dirname, '../src/assets/styles/common.less')
把路径改成想要引入的全局less 文件, 然后后面将下面代码中的 less: generateLoaders('less')
替换成上面自定义的函数 less: lessResourceLoader()
。
return {
css: generateLoaders(),
postcss: generateLoaders(),
// less: generateLoaders('less'),
less: lessResourceLoader(),
sass: generateLoaders('sass', {
indentedSyntax: true
}),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
修改完配置文件记得重启服务器:npm run dev
ok, common.less
@sidebar:240px;
@headerHeight:65px;
@bodyMinWidth: 700px;
注意,赋值不是等号
在组件中,就可以使用全局变量了。
<style lang='less' scoped>
.content {
background:red;
height:auto;
margin-left: @sidebar;
width: calc(100%-@sidebar);
}
</style>