自己的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. V4L2 API详解 <二> Camera详细设置【转】

    转自:http://blog.sina.com.cn/s/blog_602f87700101bf36.html 作者: Sam (甄峰)  sam_code@hotmail.com   Camera的 ...

  2. Linux 应用层的时间编程【转】

    转自:https://blog.csdn.net/chinalj2009/article/details/21223681 浅析 Linux 中的时间编程和实现原理,第 1 部分: Linux 应用层 ...

  3. Python3学习笔记30-datetime模块

    datetime是Python处理日期和时间的标准库 获取当前的日期和时间 from datetime import datetime now = datetime.now() print(now) ...

  4. linux系统快捷键

    tab 补全命令    两次tab    列出所有以字符前缀开头的命令 ctrl A    把光标移到命令行开头 ctrl E    把光标移到命令行结尾 ctrl C    强制终止当前的命令 ct ...

  5. <TCP/IP>DHCP动态主机配置协议

    坚持是一种好习惯 大家都知道,为了上网我们是需要提交一些配置信息的,如IP地址,子网掩码,DNS服务器等,这些是一个主机能够在Internet上运行并给用户提供常用服务(比如web和Email)的基本 ...

  6. 转-CSRF&OWASP CSRFGuard

    一. 什么是CSRF?CSRF(Cross-Site Request Forgery)直译的话就是跨站点请求伪造也就是说在用户会话下对某个需要验证的网络应用发送GET/POST请求——而这些请求是未经 ...

  7. 利用HBuilder将vue项目打包成移动端app

    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...

  8. JS导出excel设置下载的标题/与angular结合冲突

    2017.8更新 此功能与angular结合使用时,最后一行 document.getElementById("dlink").click(); 与angular的ng-click ...

  9. web@css引入方式,基本选择器,3大特性,高效运行

    4.高效的css 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素.      1.不要再ID选择器前使用标签名        解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必 ...

  10. 【原创】大数据基础之Flume(2)kudu sink

    kudu中的flume sink代码路径: https://github.com/apache/kudu/tree/master/java/kudu-flume-sink kudu-flume-sin ...