Vue2.0 less全局配置
配置 全局 Less Vue2.0
2023-09-14 09:07:53 时间
前言
再一次vue2.0的开发中,遇到这样的一个问题,使用less与处理器,封装了一套关于项目的主题,但是使用的时候,main.js中引入后依然不能直接使用定义的@theme-bg等less定义的颜色,经过查阅后,我么需要进行一些配置,百度上找了很多方法,但是都有一些问题,这里经过实践总结,总结在这,以此记录自己的开发点击
配置前的准备
npm install less less-loader -s百度上很多方法说需要配置webpack.base.conf.js(建议省略)
{ test : /\.less$/, loader: "style-loader!css-loader!less-loader", }
因此博主这里配置的时候是没有添加这段代码的,继续往下走
打开utils.js进行配置
// 配置less
function lessResourceLoader() { var loaders = [ cssLoader, 'less-loader', { loader: 'sass-resources-loader', options: { resources: [ path.resolve(__dirname, '../src/styles/base/skin.less'), ] } } ]; if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }
将上述代码添加到exports.cssLoaders中,然后找到return修改代码less:lessResourceLoader(), 在main.js中添加.
require('!style-loader!css-loader!less-loader!./styles/index.less'); //导入全局样式
这里添加的样式是全部的,通过@import引入的所有的样式文件 在utils.js中添加的路径是自己写的皮肤样式文件
配置完成,在一个页面中,尝试使用我们的样式,background-color: @bg-theme-blue;
![](https://img2018.cnblogs.com/blog/1430556/201810/1430556-20181027134553236-379660378.png)
锦囊:如果走完一切发现还是行不通,那博主给大家推荐一个源码,大家可以查看着进行修改:
相关文章
- 在单html页面中使用react并配置jsx
- Xrdp服务安装配置实现Linux远程桌面访问
- SAP Java Connector 正常运行所需的网络配置
- 【DHCP实验】使用三层交换机配置DHCP Server服务器(基于全局地址池配置)
- docker高级篇第二章-分布式存储之实战案例:3主3从redis集群扩容配置
- 【愚公系列】2023年02月 WMS智能仓储系统-010.全局过滤、中间件、格式化配置
- 【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )
- 【开发环境】PyCharm 配置 GitHub ( 从 GitHub 中 Clone 代码到 PyCharm 开发环境中 )
- 【错误记录】Android 应用配置第三方 so 动态库 ( /data/app/comxxx==/base.apk/lib/arm64-v8a]couldn‘t find “libx.so“ )
- 【Android Gradle 插件】SigningConfig 签名配置 ③ ( storeType 配置 | v1SigningEnabled / v2SigningEnabled 配置 )
- MongoDB4.0在windows10下的安装与服务配置教程详解
- Spring Boot全局支持CORS(跨源请求)的配置方法详解编程语言
- 最优配置:如何安装多个Linux内存条(linux内存条数)
- 深入Linux内核:串口配置详解(linux内核串口配置)
- linux站点快速配置:简单入门指南(linux站点配置文件)
- Oracle全局配置简化工作流程(oracle全局配置)
- 以本地环境配置Redis集群(本地连接redis集群)
- 初探Redis配置命令两不误(redis配置和命令)