vue 脚手架默认支持 css loader,但是为了偷懒想用一下 less,由此引入如何配置支持加载 less 文件
道理都懂,操作也很简单
- 安装loader包,注意这里使用的是 sass-resources-loader
npm install sass-resources-loader --save-dev
2.在 build/utils.js 中的 cssLoaders 里边添加以下代码
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader', // 这个是解析less用的,不能少
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/css/*.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
同时修改其中的 less 配置
less: lessResourceLoader(), // generateLoaders('less') 默认是这个
之后就能够开心的在 assets/css下加任意多的less文件了
网友评论