文档章节

使用less抽出公共的代码,在不同的组建中引入导致公共代码多次打包问题

wyysf
 wyysf
发布于 2018/01/15 11:07
字数 428
阅读 30
收藏 0

标题比较长,主要是没有想到怎么一句话概括出这个问题。

大家如果使用react+react-router+less + webpack的技术栈来写代码的话,你可能同样遇到这个问题。

比如你会把公共的颜色,字体大小,等等公用的放到一个类似叫base.less文件中,在你写不同组建的时候通过@import 引入进来。类似下面的代码

@import "../components/base.less";

.a-componnt__box {
    ...
}

ok,如果你是这样做的,那么在你打包的时候你会发现你的css中每一个组建的css代码都有公共的css代码。这肯定不是我们想要的,那该怎么解决呢?

首页想到的是以前的方式,写成不同的class直接给标签加class ,比如,.red {color:red},但是这种方式就没有必要使用less了。

其次我们想到就引入一次不就行了,但是问题来了,你不通过@import 方式引入代码,你在组建中写变量会报错。

在查阅了相关less-loader的代码后,找到解决的方案:

@import (reference) "../components/base.less";

.a-componnt__box {
    ...
}

通过比较你可能已经发行多了一个(reference) 这个是什么呢?想知道的话你自己google吧,我就不说了。上面的代码还有一个前提,因为一旦使用了reference这个代码就标示被@import的代码不在会被引入,那么也就是说你需要在知道的一个文件中通过@import "../components/base.less";引入一次。否则将都不会引入这个css。

 

© 著作权归作者所有

共有 人打赏支持
wyysf
粉丝 17
博文 20
码字总数 8406
作品 0
昌平
网页/平面设计
私信 提问
Webpack 4 配置最佳实践

作者 Daniel 蚂蚁金服·数据体验技术团队 Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南,在文档层面上还有所欠缺,大部分人...

蚂蚁金服数据体验技术
2018/10/30
0
0
快速打造简易高效的webpack配置

webpack给前端开发带来了毋庸置疑的改变,它把JS,图片,css都作为模块处理,同时具有开发便捷,自动化,兼容AMD写法等等诸多无须赘述的优点,更令人称道的是其插件社区非常强大,对于不同的...

ssssyoki
2018/10/29
0
0
React性能优化

一. duplicate code 项目技术栈: view :用的是基于react的 antd + ltcrm-component。 数据流: reflux 路由: react-router 打包:atool-build 由于使用了atool-build导致无法使用webpack...

-鹏
2016/06/21
1K
0
使用webpack打包的后,公共请求路径的配置问题

在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种用...

张涛泽
2017/04/19
0
0
vue多页面开发和打包的正确姿势

前段时间做项目,技术栈是vue+webpack,主要就是官网首页加后台管理系统 根据当时情况,分析出三种方案 一个项目代码里面嵌两个spa应用(官网和后台系统) 分开两套项目源码 一套项目源码里面就...

燕儿199606
2018/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

grafana安装使用及与zabbix集成

grafana简介 Grafana是一个完全开源的度量分析与可视化平台,可对来自各种各种数据源的数据进行查询、分析、可视化处理以及配置告警。 Grafana支持的数据源: 官方:Graphite,InfluxDB,Ope...

阿dai学长
39分钟前
7
0
带你看数据挖掘与机器学习-厦大EDP上课出勤预测

带你看数据挖掘与机器学习-厦大EDP上课出勤预测 标签: 数据挖掘 特征工程 机器学习 出勤预测 write by xmhexi 2019/3/22 内容提要 首先说明本文是一篇科普文章,通过一个实际案例,帮助理解什...

xmhexi
今天
100
0
IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
今天
5
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
5
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部