项目基础配置版本为:webpack 4.16,less 3.8.1,vue 2.5;局部less变量可用,全局less变量使用提示undefined,解决方法为安装style-resources-loader插件,在webpack.base.conf.js配置全局的路径地址,完美解决;
- 安装style-resources-loader 用 vue add style-resources-loader命令无效,用npm安装
npm i style-resources-loader
npm i vue-cli-plugin-style-resources-loader
- 安装成功之后配置webpack.base.conf.js
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
'postcss-loader',
{
loader: 'less-loader',
options: {
javascriptEnabled: true, // 别忘了这个!
// 单独配置全局变量部分,
// globalVars: {
// testcolor: 'red',
// },
// modifyVars: {
// 'primary-color': '#1DA57A',
// },
},
},
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/assets/css/global.less'), // 注意路径
},
},
],
},
多尝试,办法总比困难多。