你的薇笑安装
sh
npm install less less-loader --save-dev1
找到 build/webpack.base.conf.js ，在 rules 中加入：
JavaScript
rules: [
// ...
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]1
2
3
4
5
6
7
2
3
4
5
6
7
设置全局
用到 https://github.com/yenshih/style-resources-loader
npm i style-resources-loader -D1
vue cli2
找到 build/utils.js ，在 generateLoaders 方法中添加：
JavaScript
if(loader === 'less'){
loaders.push({
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/assets/config/*.less')
}
})
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
vue cli3
javascript
const path = require("path");
module.exports = {
...
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
// 不能使用别名路径
path.resolve(__dirname, "./src/assets/config.less")
]
}
}
...
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
这样就能在任意的 less 文件中使用config文件夹下定义的less变量、函数了