一. 引入less
npm install less less-loader --save-dev
二. 引入样式资源处理器
在style资源中注入css / sass / scss / less / stylus这些内容。
主要作用导入一些公共的样式文件,避免在每个样式文件中手动的@import导入。
vue add style-resources-loader
选择CSS Pre-processor :less
三. 全局引入less文件
在项目根目录找到vue.config.js文件,如果没有就创建这个文件。我这里全局引入了公共字体,颜色样式文件。
// vue.config.js文件
const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, 'src/assets/less/color.less'), path.resolve(__dirname, 'src/assets/less/font.less')]
}
}
}