class类名在webpack项目中的两种引用方式
一、问题描述
在项目工程中,我们通常既用到css module,也用到普通的less文件引用方式,代码及webpack配置如下,运行时,发现只有css module起作用,如何让两者都起作用呢?
// exp1.less .box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } // exp2.less .pf { color: aquamarine; font-size: 20px; } // jsx文件 import './exp1.less'; //普通用法 import styles from './exp2.less'; //css module <div className='box'> <p className={styles.pf}>测试cssmodule语法</p> </div>
// webpack配置文件。 { test: /\.less$/, exclude:'node_modules', use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { minimize: false, modules: true, localIdentName: '[name]_[local]_[hash:base64:5]' } }, 'less-loader' ] }
二、问题分析
这是由于webpack加载器配置不对引起的。
三、解决方案
1、都写成less文件,但是要放在不同目录,并且修改webpack配置。
// exp1.less .box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } // exp2.less .pf { color: aquamarine; font-size: 20px; } //jsx文件 import './exp1.less'; //普通用法 import styles from './cml/exp2.less'; //css module <div className='box'> <p className={styles.pf}>测试cssmodule语法</p> </div> // webpack配置文件,cml为目录名,统一放需要css module的less文件。 { test: /\.less$/, exclude:/(node_modules|cml)/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader' }, 'less-loader' ] }, { test: /\.less$/, exclude:/node_modules/, include:/cml/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { minimize: false, modules: true, localIdentName: '[name]_[local]_[hash:base64:5]' } }, 'less-loader' ] },
2、写成css文件和less文件,放在同一目录。(推荐)
// exp1.css .box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } // exp2.less .pf { color: aquamarine; font-size: 20px; } // jsx文件 import './exp1.css'; // 普通用法 import styles from './exp2.less'; //css module <div className='box'> <p className={styles.pf}>测试cssmodule语法</p> </div> // webpack配置文件。 { test: /\.less$/, exclude:'node_modules', use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { minimize: false, modules: true, localIdentName: '[name]_[local]_[hash:base64:5]' } }, 'less-loader' ] }
3、在团队中统一代码风格
尤其在同一个项目中,推荐使用同一种类名引用方式,要么都用普通方式。
// exp1.less .box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } // exp2.less .pf { color: aquamarine; font-size: 20px; } // jsx文件 import './exp1.less'; //普通用法 import './exp2.less'; //普通用法 <div className='box'> <p className='pf'>测试cssmodule语法</p> </div>
// webpack配置文件 { test: /\.less$/, exclude:/node_modules/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader' }, 'less-loader' ] }
4、在团队中统一代码风格(推荐)
尤其在同一个项目中,推荐使用同一种类名引用方式,都用css module。
// exp1.less .box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } // exp2.less .pf { color: aquamarine; font-size: 20px; } // jsx文件 import style1 from './exp1.less'; //css module import styles from './exp2.less'; //css module <div className={style1.box}> <p className={styles.pf}>测试cssmodule语法</p> </div>
// webpack配置文件 { test: /\.less$/, exclude:/node_modules/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { minimize: false, modules: true, localIdentName: '[name]_[local]_[hash:base64:5]' } }, 'less-loader' ] },
class类名在webpack项目中的两种引用方式的更多相关文章
- Javaweb学习笔记——(六)——————xml中jaxp两种解析方式和dom4j运用
1.xml的scheam约束 dtd的语法:<!ElEMENT 元素名称 约束> **schema符合xml的语法,xml语句 **一个xml中可以有多个schema,多个schema使用 ...
- javascript中对象两种创建方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 测开之路一百零五:bootstrap的两种引用方式
一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...
- css的两种引用方式 link和@import
学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...
- Java中的四种引用方式
无论是通过引用计数算法判断对象的引用数量,还是通过可达性分析算法判断对象的引用链是否可达,判定对象是否存活都与"引用"有关.在Java语言中,将引用又分为强引用.软引用.弱引用 ...
- String中的两种实例化方式的区别
直接赋值:(String str = "字符串");只会开辟一块堆内存空间,并且会自动保存在对象池中以供下次重复使用. 构造方法:(String str = new String ...
- iOS中的两种搜索方式UISearchDisplayController和UISearchController
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 以前iOS的搜索一般都使用UISearchDisplayCon ...
- web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例
()post http://04101334.iteye.com/blog/637695/ ()get function serializeElement(element) { var method ...
- Hibeernate中的两种分页方式
1. return getHibernateTemplate().executeFind(new HibernateCallback() { public Object doInHibernate(S ...
随机推荐
- git分支相关的命令
Git 分支管理及结合gitlab的使用 说明有关gitlab的说明及基本操作,请参考:https://blog.51cto.com/wutengfei/2090253使用git分支的作用,我们先来说 ...
- Hive ACID和事务表支持详解
一.ACID介绍 ACID就是常见数据库事务的四大特性:Atomicity(原子性).Consistency(一致性).Isolation(隔离性).Durability(持久性). 在Hive 0. ...
- PHP CURL 错误码说明
curl_setopt($ci, CURLOPT_HEADERFUNCTION, array($this, 'getHeader'));//一般不加 <?php return [ '1'=> ...
- Bzoj 2875: [Noi2012]随机数生成器(矩阵乘法)
2875: [Noi2012]随机数生成器 Time Limit: 10 Sec Memory Limit: 512 MB Submit: 2052 Solved: 1118 Description ...
- 记录一个webstorm的设置或者说小技巧
在 html 的元素中,如果输入属性,默认会填充 引号,在 react 书写中非常不方便. 其中的JSX很多时候是不需要 quotation 的,只是需要一个 括号 {} 即可. 自己找了下webst ...
- [php][thinkphp] 记一次Composer Linux版安装以及用它进行thinkphp项目初始化
Composer安装thinkphp,thinkphp5.1开始官网不在提供下载包,只能通过git clone 和Composer包管理器进行下载. php中开启exec,system等函数调用系统命 ...
- ZR#985
ZR#985 解法: 可以先假设每个区间中所有颜色都出现,然后减掉多算的答案.对每种颜色记录它出现的位置,则相邻两个位置间的所有区间都要减去,时间复杂度 $ O(n) $ . 其实可以理解为加法原理的 ...
- ICEM-轴
https://yunpan.cn/cuy98EwwXvYkb 访问密码 0897
- 依赖倒置原则(DIP)
1. 定义 (1)高层模块不应依赖于低层模块,两者都应该依赖于抽象.(2)抽象不应该依赖于细节,细节应该依赖于抽象. 为什么是“倒置”这个词? 这是由于许多传统的软件开发方法,比如结构化分析和设计,总 ...
- mac编译Cpython
源代码中有什么? CPython 源代码分发包含各种工具,库和组件.我们将在本文中探讨这些内容. 首先,我们将重点关注编译器.先从 git 上下载 Cpython 源代码. git clone htt ...