vue-引入less和配置less变量到全局
2019-06-06 18:39
351 查看
一.安装less
npm i less less-loader --save-dev
二.设置less变量到全局
// 1.安装sass-resources-loader npm install sass-resources-loader --save-dev
// 2.配置build/utils.js,找到exports.cssLoaders函数,如下 exports.cssLoaders = function (options) { options = options || {} const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } // 此处添加配置 // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), // 第二步更改这里 sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } }
在上面注释“// 此处添加配置”处添加如下代码:
// 配置less变量全局 function lessResourceLoader() { var loaders = [ cssLoader, 'less-loader', { loader: 'sass-resources-loader', options: { resources: [ path.resolve(__dirname, '../src/assets/style/var.less'), // ../src/assets/style/var.less为你的全局less变量的文件目录 ] } } ] if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }
3.更改exports.cssLoaders函数的return参数,将less: generateLoaders(‘less’)改为 less: lessResourceLoader(‘less’),如下:
return { css: generateLoaders(), postcss: generateLoaders(), // less: generateLoaders('less'), // 更改这里为下面一行 less: lessResourceLoader('less'), // lessResourceLoader即第一步添加的函数名 sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
经过上面两处更改后,exports.cssLoaders函数如下:
exports.cssLoaders = function (options) { options = options || {} const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } // 第一步:配置less变量全局 function lessResourceLoader() { var loaders = [ cssLoader, 'less-loader', { loader: 'sass-resources-loader', options: { resources: [ path.resolve(__dirname, '../src/assets/style/var.less'), // ../src/assets/style/var.less为你的全局less变量的文件目录 ] } } ] if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), // 第二步: less: generateLoaders('less')更改为 less: lessResourceLoader('') // less: generateLoaders('less'), less: lessResourceLoader(''), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } }
重启项目即可
相关文章推荐
- Vue引入sass并配置全局变量的方法
- 使用webpack+vue+less开发,使用less-loader,配置全局less变量
- vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量
- 详解vue项目中如何引入全局sass/less变量、function、mixin
- vue引入sass全局变量
- Vue文件配置全局变量的实例
- Vue文件配置全局变量
- Vue-cli开发笔记二----------接口调用、配置全局变量
- vue 3.0项目.env文件配置全局环境变量
- vue实现引用less,sass全局变量
- vue如何引入sass全局变量
- vue中接口域名配置为全局变量
- vue中接口域名配置为全局变量的实现方法
- Vue-cli开发笔记二----------接口调用、配置全局变量
- Vue项目全局配置页面缓存之按需读取缓存的实现详解
- 18-Vue实例的全局配置
- 在vue里面设置全局变量或数据
- freeswitch配置之全局变量
- vue init webpack-simple 模板中全局引入Jquery正确使用方法 可保jQuery插件正常使用
- 配置全局变量application imageloader框架