一步步的实现vue-cli2.0引入全局css样式。
引入less 和 sass-resources-loader
npm install less less-loader --save
npm install sass-resources-loader --save-dev
进入build > utils.js
找到函数 generateLoaders(声明函数处) 将以下代码复制到此函数后面
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/style/public.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
复制完成的代码样子是
)
修改参数
然后将generateLoaders函数在调用时的参数为less的修改成less: lessResourceLoader(‘less’)。具体见下图
声明全局变量
然后在 public.less 中声明less变量。具体见下图
调用全局变量
现在在任意一个 .vue文件中都可以调用上面声明的变量。具体见下图
ok,全部完成了。
如有疑问,请回复给我吧。哪怕一个错字呢。汪
——二哈