自己的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. UniGUI 如何进行 UniDBGrid 的单元 Cell 的计算 ?

    来源:http://forums.unigui.com/index.php?/topic/10508-update-dataset-events-in-unidbgrid/?hl=unidbgrid ...

  2. python3+selenium入门02-操作火狐浏览器

    使用selenium打开浏览器的时候,需要先去selenium官网下载一个对应浏览器的的driver插件.selenium下载.官网在国外可能打不开.或者可以从我网盘下载,但可能不是最新的网盘链接.将 ...

  3. vc++基础班[24]---系统各种路径信息的获取

    vc++基础班[24]---系统各种路径信息的获取 ------------------------------------------ Begin ------------------------- ...

  4. Mudo C++网络库第七章学习笔记

    muduo编程示例 muduo库是设计来开发内网的网络程序, 它没有做任何安全方面的加强措施, 如果在公网上可能会受到攻击; muduo库把主动关闭连接这件事分成两步来做: 如果主动关闭连接, 会先关 ...

  5. mysql查询sending data占用大量时间的问题处理

    问题描述:某条sql语句在测试环境执行只需要1秒不到,到了生产环境执行需要8秒以上 在phpmyadmin里面执行性能分析,发现sending data占用了差不多90%以上的时间 查询一下“Send ...

  6. 制作缩略图java工具类

    import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.File ...

  7. 51nod--1256 乘法逆元 (扩展欧几里得)

    题目: 1256 乘法逆元 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < ...

  8. Struts2,springMVC获取request和response

    springMVC获取request和response1:在BaseController中加入: protected HttpServletRequest request;   protected H ...

  9. Confluence 6 虚拟文件和文件夹

    在取消点赞事件中,你可能会遇到 WebDAV  客户端的问题或者不稳定的情况,你可以启用访问自动创建(虚拟)文件和文件夹. 备注: 在默认情况下,这个选项隐藏在 'WebDAV Configurati ...

  10. Confluence 6 确定一个生产系统备份方案

    Atlassian 推荐创建一个可选的数据库备份方案: 使用你数据库提供的备份和恢复工具 为了避免数据不完整和备份中断,我们推荐你在备份和恢复 Confluence 数据库的时候关闭 Confluen ...