自己的react项目用到了css-modules,由于不太想在写className时写style.xxx于是google解决方案,找到了这货->babel-plugin-react-css-modules
然而写配置时踩了无数坑,网上唯一一篇中文讲使用的文章也过时了(webpack...),结合github文档及官方的demo终于鼓捣出了一个能用的配置。

{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
...
...
"plugins": [
...
// 其他插件
[
"react-css-modules", {
"generateScopedName": '[name]-[local]-[hash:base64:5]', "filetypes": {
".styl": {
"syntax": "sugarss",
}
}
}
]
]
},
},

本人使用了stylus因此syntax使用了sugrass,详情戳这里
这个插件不支持webpack的alias,可以用postcss解决,详情戳这里

作者:云彩上的翅胖
链接:https://www.jianshu.com/p/0925f9a955d4
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

[转] babel-plugin-react-css-modules配置的更多相关文章

  1. React & CSS Modules & CSS in JS

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

  2. CSS Modules 与 scoped 的不一样

    What ? css 的作用域表现. Css modules 是一个CSS文件,其中所有类名和动画名称默认为局部作用域. 使用JS编译原生的CSS文件,使其具备模块化的能力,该文件需要import使用 ...

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

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

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

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

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

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

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

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

  7. react中关于create-react-app2里css相关配置

    先看 webpack.config.dev.js 里的相关代码: // style files regexes const cssRegex = /\.css$/; const cssModuleRe ...

  8. CSS modules 与 React中实践

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

  9. vue-loader v15、vue-loader v14及之前版本,配置css modules的区别

    vue-loader v15 配置css modules: 是在 css-loader 里配置 官方文档:https://vue-loader.vuejs.org/zh/migrating.html# ...

  10. [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 ...

随机推荐

  1. Delphi 的 FireDAC 连接管理与配置过程

    Delphi 的 FireDAC 连接管理与配置过程: 使用 FireDAC 技术连接 数据库,主要是使用  TFDConnection ,其中有一参数是选择  ConnectionDefFile. ...

  2. HAProxy详解(一):HAProxy介绍【转】

    一.高性能负载均衡软件HAProxy介绍: 随着互联网业务的迅猛发展,大型电商平台和门户网站对系统的可用性和可靠性要求越来越高,高可用集群.负载均衡集群成为一种热门的系统架构解决方案.在众多的负载均衡 ...

  3. requests库入门03-get请求

    先看一个没有请求参数的get请求,访问百度首页 import requests r = requests.get('https://www.baidu.com') print(r.status_cod ...

  4. C#编写COM组件

    1.新建一个类库项目 2.将Class1.cs改为我们想要的名字 问是否同时给类改名,确定 3.修改Properties目录下面的AssemblyInfo.cs ComVisible属性设置为True ...

  5. Unity打包PC端各种屏幕适配,无边框,最小化,显示可拖拽部分

    using UnityEngine; using System.Collections; using UnityEngine.EventSystems; //using UnityEngine.Sce ...

  6. 下载chrome插件和离线安装CRX文件的方法

    自从chrome网上应用店出来后无法下载插件,必须在线安装,安装后又自动把CRX删除,而且是那么的迅速...以下是下载离线插件包的方法:第一步: 每个Google Chrome扩展都有一个固定的ID, ...

  7. C# 操作Excel加水印

    首先下载免费版的Excel组件- Spire.XLS,安装完成后在bin目录里面有需要用到的dll文件,引用到自己项目里面. 我这里全引进来了,一共就四个: 界面 效果 全部代码 private st ...

  8. 40)django-常用过滤器

    一.形式:小写 {{ name | lower }} 二.过滤器是可以嵌套的,字符串经过三个过滤器,第一个过滤器转换为小写,第二个过滤器输出首字母,第三个过滤器将首字母转换成大写 标签 {{ str| ...

  9. js——事件冒泡与捕获小例子

    布局代码 #outer{ width: 300px; height: 300px; background: red; } #inner{ width: 200px; height: 200px; ba ...

  10. STM32应用实例十四:利用光敏二极管实现光度测量

    最近我们在开发臭氧发生器时,需要监测生成的臭氧的浓度,于是想到使用光度计来测量.因为不同浓度的臭氧对管的吸收作用是不相同的,于是检测光照强度的变化就可以得到相应的浓度数据. 1.硬件设计 此次光照度检 ...