vue-cli4使用全局less文件中的变量配置操作


Posted in Javascript onOctober 21, 2020

目录结构如下:

vue-cli4使用全局less文件中的变量配置操作

需求:

在Navgation.vue中使用global.less中的变量

vue-cli3的配置方法如下:传送门

vue-cli4的配置方法如下:

安装 style-resources-loader

npm i style-resources-loader -D

在 vue.config.js 中加上如下配置,没有则创建该文件,文件名不能改,如下:

// vue.config.js
const path = require('path')
 
module.exports = {
 lintOnSave: false,
 chainWebpack: config => {
 const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
 types.forEach(type => addStyleResource(config.module.rule('less这里写你的样样式类型').oneOf(type)))
 },
}
 
function addStyleResource (rule) {
 rule.use('style-resource')
 .loader('style-resources-loader')
 .options({
  patterns: [
  path.resolve(__dirname, './src/assets/css/global.less这里写你的全局样式地址'),
  ],
 })
}

补充知识:vue项目中配置LESS全局变量注入

在日常项目中,很多人都用到了css预处理器 ,如sass,less, stylus,处理样式非常方便,尤其是嵌套,变量,函数等,让我们书写css非常nice,在项目中一般会建立一个样式文件夹(此处用less),存放公共样式和公共变量如项目主体色,字体大小等等的变量,但是在项目中使用这些变量的时候通常都要在style标签内用@import '***/***/***/***.less';这样的方式来导入公共变量,页面一多,每个页面一般都需要引入就会感到很繁琐,所以此处就用到webpack的一些配置来达到全局注入,单个文件不需要单独引入的目的。

此处说下自己用的之前的脚手架版本的配置

在build文件夹下的webpack.base.conf.js文件中修改,主要借助了sass-resources-loader。

配置的时候还需要在问价头部引入path,const path = require('path')

然后在module模块下进行配置

module: {
  resolve: {
  extensions: ['.ts', '.js', '.vue', '.json'],
  // 顺带说下 此处可以配置路径别名,以后引入文件就不需要../../../这样了,直接@/就可以了,代表src下的路径,当然可设置多个,可自行配制
  alias: {
   '@': utils.resolve('src')
  }
  },
  ///
 rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   // /-------------
  {
   test: /\.less$/,
   use: [{
    loader: process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'vue-style-loader'
   }, {
    loader: 'css-loader',
    options: {
    sourceMap: cssSourceMap
    }
   }, {
    loader: 'less-loader',
    options: {
    sourceMap: cssSourceMap
    }
   }
   //此处开始------/ 
   {
    loader: 'sass-resources-loader',
    options: {
    resources: [
     path.resolve(__dirname, '此处写自己配置的公共变量文件路径,比如../src/themes/publicStyle/common.less')
    ]
    }
    //此处结束-------/ 
   }]
  },

然后说下自己查资料研究的cli3下的全局变量注入

cli3 与之前的cli不一样了,build和config文件没有了 ,所有的配置都需要在自己新建的vue.config.js文件里进行配置,具体配置官方文档和各种资料都很详细,在这就不详述了,在这就说下自己练手的一些配置,仅供参考,主要看全局变量注入那块,主要用的是style-resources-loader ,npm i style-resources-loader -D

const path = require("path");
function resolve(dir) {
 return path.join(__dirname, dir);
}
module.exports = {
 publicPath: "./",
 outputDir: "dist",
 assetsDir: "assets",
 indexPath: "index.html",
 filenameHashing: true,
 pages: undefined,
 lintOnSave: true,
 runtimeCompiler: false,
 transpileDependencies: [],
 productionSourceMap: false,
 crossorigin: undefined,
 integrity: false,
 devServer: {
 proxy: {
  "/api": {
  target: "************",
  changeOrigin: true,
  pathRewrite: { "^/api": "" }
  }
 }
 },
 // ------------------此处开始,以下是全局变量注入的配置--------------
 chainWebpack: config => {
 config.resolve.alias.set("@assets", resolve("src/assets"))
 // 这里只写了两个个,你可以自己再加,按这种格式.set("", resolve(""))
 const types = ["vue-modules", "vue", "normal-modules", "normal"]
 types.forEach(type =>
  addStyleResource(config.module.rule("less").oneOf(type))
 );
 },
 css: {
 loaderOptions: {
  less: {
  javascriptEnabled: true
  }
 }
 }
};
function addStyleResource(rule) {
 rule
 .use("style-resource")
 .loader("style-resources-loader")
 .options({
  patterns: [
  path.resolve(__dirname, "src/styles/index.less") // 需要全局导入的less
  ]
 })
}

大家一起加油! 如有不对之处,请大家不吝赐教。

之后看到另一个后台管理系统的配置,发现另一种配法 (cli3)

安装less less-loader style-resources-loader

npm install -D less-loader less
npm i style-resources-loader
npm i vue-cli-plugin-style-resources-loader

安装完后,在vue.config.js中配置

const path = require('path');
module.exports = {
 pluginOptions: {
  'style-resources-loader': {
   preProcessor: 'less',
   patterns: [
    // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
    path.resolve(__dirname, './src/style/params.less')
   ]
  }
 },
 ……
 其他配置
 ……
}

安装的时候也可以方法二:直接使用vue add style-resources-loader安装,vue add pluginName 是vue-cli3提供的。

vue add 是用yarn安装插件的, yarn源的问题有可能导致失败。

如果安装失败的话,就上面分别安装的方法来

以上这篇vue-cli4使用全局less文件中的变量配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 #Javascript
js 图片懒加载的实现
Oct 21 #Javascript
uniapp实现可以左右滑动导航栏
Oct 21 #Javascript
解决vue-loader加载不上的问题
Oct 21 #Javascript
Vue实现返回顶部按钮实例代码
Oct 21 #Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 #Javascript
uniapp实现可滑动选项卡
Oct 21 #Javascript
You might like
PHP安装问题
2006/10/09 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
php 文件缓存函数
2011/10/08 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP中的self关键字详解
2019/06/23 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
Javascript 之封装(Package)
2018/09/14 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
js抽奖转盘实现方法分析
2020/05/16 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python中_del_还原数据的方法
2020/12/09 Python
python中random模块详解
2021/03/01 Python
台湾家适得:Homeget
2019/02/11 全球购物
经典c++面试题二
2015/08/14 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
学校安全责任书
2014/04/14 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
Spring中的@Transactional的工作原理
2022/06/05 Java/Android