自己的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. boost.log在项目中应用

    //头文件#pragma once #include <string> #include <boost/log/trivial.hpp> using std::string; ...

  2. 题解-CodeForces700E Cool Slogans

    Problem 题目链接 题目大意:给定一个字符串,每次取出出现至少两次的子串替换原串,问最多能替换多少次,输出答案加一(字符串长为\(2×10^5\)) Solution 前置技能:SAM.线段树合 ...

  3. windows类书的学习心得

    原文网址:http://www.blogjava.net/sound/archive/2008/08/21/40499.html 现在的计算机图书发展的可真快,很久没去书店,昨日去了一下,真是感叹万千 ...

  4. POJ 1741 Tree 树上点分治

    题目链接:http://poj.org/problem?id=1741 题意: 给定一棵包含$n$个点的带边权树,求距离小于等于K的点对数量 题解: 显然,枚举所有点的子树可以获得答案,但是朴素发$O ...

  5. 021_nginx动态upstream检查

    GET: 请求指定的页面信息,并返回实体主体.HEAD: 只请求页面的首部. #参考:http://tengine.taobao.org/document_cn/http_upstream_check ...

  6. mybatis:自动分页插件

    项目地址:https://github.com/pagehelper/pagehelper-spring-boot 简单使用: 1.在pom文件中添加 <dependency> <g ...

  7. Ex3_2 最近点对

    原文链接http://blog.csdn.net/zyang008/article/details/6175587 分治法 1)算法描述:已知集合S中有n个点,分治法的思想就是将S进行拆分,分为2部分 ...

  8. Day6------------软连接和硬链接

    一.块 1.操作系统分四大类块 super block 掌管全局 inode block directory block block 2.删文件 普通删除只是删除链接,数据还在硬盘 彻底删除:覆盖操作 ...

  9. python-socket编程(入门,网络基础)

    一.网络基础 网络建立的目的是为了数据交互(通信) 如何实现通信: 1.建立好底层的物理连接介质 2.有一套统一的通信标准,称之为互联网协议 1.osi七层协议 互联网协议按照功能的不同分为osi七层 ...

  10. c# 操作Word总结(车)

    在医疗管理系统中为保存患者的体检和治疗记录,方便以后的医生或其他人查看.当把数据保存到数据库中,需要新建很多的字段,而且操作很繁琐,于是想到网页的信息创建到一个word文本中,在显示的时,可以在线打开 ...