当前位置: 代码迷 >> 综合 >> vue-cli中使用Less全局变量,一次性导入
  详细解决方案

vue-cli中使用Less全局变量,一次性导入

热度:82   发布时间:2023-10-29 20:15:00.0

1、安装sass-resources-loader

npm install sass-resources-loader --save-dev

2、添加函数

找到 build/utils.js 文件,在 exports.cssLoaders 模块中加多一个函数

function lessResourceLoader() {var loaders = [cssLoader,'less-loader',{loader: 'sass-resources-loader',options: {resources: [path.resolve(__dirname, '../src/resource/css/global/global.less'),]}}];if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}}

其中 '../src/resource/css/global/global.less' 路径改成自己对应的文件然后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()


3、运行项目

npm run dev