用create-react-app创建的项目基于react-scripts内建支持css modules,需要把css文件名改成filename.module.css,导入方式需要改成:

import styles from './Button.module.css'; // Import css modules stylesheet as styles

class定义方式改成了:

<button className={styles.error}>Error Button</button>

编译后这个error class被唯一化:

<button class="Button_error_ax7yz"></div>

对比其他web框架的CSS组件隔离渲染,这个方案的弊病:导入语句和html代码都是强侵入。还有一个问题当文件名中间加了.module以后,就必须用上面的和导入方式,用styles.className方式定义class了,否则css Modules编译完,不加编译后处理的classname就无效了,这可真是强耦合的一个糟糕设计,just fro implemention。

react-scripts的css modules的更多相关文章

  1. 在React中使用CSS Modules设置样式

    最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些 ...

  2. CSS modules 与 React中实践

    最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的. 目前学到css绑定的问题,看到有一篇好的文章,就转过来了. CSS 模块化的解决方案有很多,但主要有两类.一类是彻底抛弃 CS ...

  3. 转 : CSS Modules详解及React中实践

    https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...

  4. CSS Modules入门及React中实践(内附webpack4配置)

    本篇文章以整理为主,自己进行了部分修改,如有侵权,请告知 CSS Modules介绍 CSS Modules是什么东西呢?首先,让我们从官方文档入手:GitHub – css-modules/css- ...

  5. CSS Modules 解决 react 项目 css 样式互相影响的问题

    1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...

  6. React & CSS Modules & CSS in JS

    React & CSS Modules & CSS in JS https://codesandbox.io/s/css-modules-name-mangling-ck1eo CSS ...

  7. [Webpack + React] Import CSS Modules with TypeScript and webpack

    If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webp ...

  8. CSS Modules入门教程

    为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突 过程是这样的:你现在有两个模块,分 ...

  9. css模块化及CSS Modules使用详解

    什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...

  10. CSS Modules In Webpack

    1)从形式上看,CSS Modules 是将CSS中的选择器转换为变量,然后在DOM中引用变量来引入样式. 2)从效果上看,CSS Modules 可以将CSS选择器名字转成随机字符串,保证选择器同名 ...

随机推荐

  1. Quartz.NET开源作业调度框架系列(四):Plugin Job-转

    如果在Quartz.NET作业运行时我们想动态修改Job和Trigger的绑定关系,同时修改一些参数那么该怎么办呢?Quartz.NET提供了插件技术,可以通过在XML文件中对Job和Trigger的 ...

  2. 搭建 Node.js 环境

    安装 Node.js 环境 任务时间:5min ~ 10min Node.js 是运行在服务端的 JavaScript, 是基于 Chrome JavaScript V8 引擎建立的平台. 下载并安装 ...

  3. 监听Sms.Content_URI而不是Sms.Inbox.CONTENT_URI

    getContentResolver().registerContentObserver(Sms.Inbox.CONTENT_URI,         true, newMsgObserver); / ...

  4. js中的getBoundingClientRect()函数

    在Chrome上,此函数返回结果包含x,y,它们的取值对应于left,top.但是x,y这种表示方式非常不直观(需要先理解x轴和y轴的方向),而left,top则清晰无歧义地表达了元素的位置.正是因此 ...

  5. 【RS】Local Collaborative Ranking - LCR: 局部协同排序

    [论文标题]Local Collaborative Ranking   (WWW '14 23rd WWW ) [论文作者]Joonseok [论文链接]Paper(11-pages // Doubl ...

  6. Linux主要shell命令详解(中)

    shell中的特殊字符 shell中除使用普通字符外,还可以使用一些具有特殊含义和功能的特殊字符.在使用它们时应注意其特殊的含义和作用范围.下面分别对这些特殊字符加以介绍. 1. 通配符 通配符用于模 ...

  7. [转]nf_conntrack: table full, dropping packet 连接跟踪表已满,开始丢包 的解决办法

      nf_conntrack: table full, dropping packet  连接跟踪表已满,开始丢包 的解决办法 中午业务说机器不能登录,我通过USM管理界面登录单板的时候发现机器没有僵 ...

  8. 如何设置IIS程序池的回收时间,才能最大程度的减少对用户的影响?

    作为.Net开发人员,其实对IIS的应用程序池知之甚少,在工作中我也有几次遇到过网站无故打不开的情况,找了半天原因也找不到是怎么造成的,有一次我给网站找了一个程序程序池后发现就能正常访问了,这也让我对 ...

  9. MySQL中模拟oracle中的rownum列

    mysql> select @rn := @rn + 1 as rownum, emp_no, dept_no, from_date, to_date -> from dept_emp, ...

  10. rhel 7 设置默认运行级别为图形

    查看默认级别 # systemctl get-default multi-user.target # cat /etc/inittab # inittab is no longer used when ...