在vue中,可以通过以下方法,解决既可以在组件中使用全局变量,也可以在less文件中使用全局变量
已经安装less和less-loader的进行下面的操作,如果没有安装的就先安装这两个依赖
- 过渡3.0版本的vue-cil解决方案
- 定义一个存放变量的less文件
- 安装style-resources-loader,vue-cli-plugin-style-resources-loader
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
- 在vue.config.js中,把变量的less文件配置进去
const path = require('path') // 这个是需要的 module.exports = { pluginOptions: { // 添加下面这段。src/style/globalValue.less为存放变量的路径+文件 'style-resources-loader': { preProcessor: 'less', patterns: [path.resolve(__dirname, "src/style/globalValue.less")] } } }
- 2.0版本的解决方案
- 安装依赖sass-resources-loader
npm i sass-resources-loader -D
- 安装完sass-resources-loader后,咱们还需要简单配置下webpack
- 找到build/utils.js文件
- 在cssLoaders函数中添加使用全局less函数
function lessResourceLoader() { // 增加全局使用less函数 var loaders = [ cssLoader, 'less-loader', { loader: 'sass-resources-loader', options: { resources: [ path.resolve(__dirname, '../src/style/_color.less'), //定义全局变量的文件路径 ] } } ]; if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }
- 在return中用lessResourceLoader() (代表的是你写函数所使用的名字,自己可以起任意名字) 替换之前less函数
return { css: generateLoaders(), postcss: generateLoaders(), less: lessResourceLoader(), // 替换之后 // less: generateLoaders('less'), // 原webpack配置的 sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }