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 相关文章推荐
js switch case default 的用法示例介绍
Oct 23 Javascript
前台js调用后台方法示例
Dec 02 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
详解node中创建服务进程
May 09 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
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
桌面中心(三)修改数据库
2006/10/09 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
php flv视频时间获取函数
2010/06/29 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
webpack3之loader全解析
2017/10/26 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
Python处理Excel文件实例代码
2017/06/20 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
详解Python中的分支和循环结构
2020/02/11 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
出纳岗位职责
2013/11/09 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
企业出纳岗位职责
2014/03/12 职场文书
同学聚会主持词
2014/03/18 职场文书
2014中考励志标语
2014/06/05 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
小学教师岗位职责
2015/04/02 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python