自己的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. 定制化rpm包及本地yum仓库搭建

    为方便本地yum的管理,一般都是在公司局域网内搭建本地yum仓库,实现公司内部快速安装常用软件. 步骤如下: 1.搭建要实现本地yum管理的软件,测试该软件搭建成功与否: 2.定制rpm包及其相关依赖 ...

  2. delete指针以后应赋值为NULL

    delete p后,只是释放了指针中存放的地址中的内存空间.但是指针变量p仍然存在(即指针p本身所占有的内存),且p中存放的地址还是原来的地址. 例如: 对一个非空指针delete后,若没有将p赋为N ...

  3. hibernate框架学习之增删改查helloworld

    插入数据删除数据修改数据查询单条数据查询多条数据 HelloWorldApp.java package cn.itcast.h3.helloworld; import org.hibernate.Se ...

  4. CANopen--Copley驱动器 ACJ-055-18 过程数据PDO的断电保存方法

    Copley CANopen 系列驱动器中,均保存有默认的 PDO 设置, 如下图所示 实际使用中,往往需要修改默认的 PDO 配置,以映射不同模式或功能下的 PDO 对象,但由于 PDO 配置无法存 ...

  5. vue v-show绑定

    在Vue中使用v-show指令来选择性的显示内容.它的属性值可以是布尔值.属性名称以及函数名称.如果使用函数来控制的话,无论函数内容如何运算判断,最终返回布尔值true或者false就可以了 < ...

  6. Swift 学习- 02 -- 基础部分2

    class NamedShape{ var numberOfSides: Int = 0 var name: String init(name: String) { self.name = name ...

  7. Mysql8.0安装步骤

    Mysql8.0安装步骤 2018年05月10日 14:39:05 93年的香槟 阅读数:19628 标签: mysql 更多 个人分类: 数据库   版权声明:本文为博主原创文章,未经博主允许不得转 ...

  8. 处理:“ORA-00257: archiver error. Connect internal only, until freed”的错误问题

    注:本文参考了< ORA-00257: archiver error. Connect internal only, until freed 错误的处理方法  > 一:问题背景: 今天在 ...

  9. bs4

  10. GitHub搭配使用Travis CI 进行自动构建服务

    Travis CI (Continuous Integration)持续集成服务 用处:自动监控软件仓库,可以在代码提交后立刻执行自动测试或构建 1.在Github自己的仓库根目录里添加.travis ...