vue-cli2使用less
第一步 安装less和less-loader,命令如下
npm install less less-loader --sava-dev
第二步 打开build/webpack.base.conf.js,在module.exports对象中的module的rules中添加依赖
module.exports = {
module: {
rules: [
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]
}
第三步 在代码中的style标签中加上 lang=“less” 就可以使用了
配置全局less文件
首先,会用到webpack中的资源预处理器Style Resources Loader,所以需要:
npm i style-resources-loader -D
然后在build/utils.js文件中可以找到CSS预处理器的实现方式进行覆盖:
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
if(loader == 'less'){
loaders.push({
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/assets/public.less')
}
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}