[转] babel-plugin-react-css-modules配置
自己的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配置的更多相关文章
- React & CSS Modules & CSS in JS
React & CSS Modules & CSS in JS https://codesandbox.io/s/css-modules-name-mangling-ck1eo CSS ...
- CSS Modules 与 scoped 的不一样
What ? css 的作用域表现. Css modules 是一个CSS文件,其中所有类名和动画名称默认为局部作用域. 使用JS编译原生的CSS文件,使其具备模块化的能力,该文件需要import使用 ...
- CSS Modules入门及React中实践(内附webpack4配置)
本篇文章以整理为主,自己进行了部分修改,如有侵权,请告知 CSS Modules介绍 CSS Modules是什么东西呢?首先,让我们从官方文档入手:GitHub – css-modules/css- ...
- 在React中使用CSS Modules设置样式
最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些 ...
- 转 : CSS Modules详解及React中实践
https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...
- CSS Modules 解决 react 项目 css 样式互相影响的问题
1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...
- react中关于create-react-app2里css相关配置
先看 webpack.config.dev.js 里的相关代码: // style files regexes const cssRegex = /\.css$/; const cssModuleRe ...
- CSS modules 与 React中实践
最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的. 目前学到css绑定的问题,看到有一篇好的文章,就转过来了. CSS 模块化的解决方案有很多,但主要有两类.一类是彻底抛弃 CS ...
- vue-loader v15、vue-loader v14及之前版本,配置css modules的区别
vue-loader v15 配置css modules: 是在 css-loader 里配置 官方文档:https://vue-loader.vuejs.org/zh/migrating.html# ...
- [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 ...
随机推荐
- IP保留地址
保留地址的网络只能在内部进行通信,而不能与其他网络互连.因为本网络中的保留地址同样也可能被其它网络使用,如果进行网络互连,那么寻找路由时就会因为地址的不唯一而出现问题. 但是这些使用保留地址的网络可以 ...
- VUE 图片验证码
1. 概述 1.1 说明 在开发过程中,有时候需要使用图片验证码进行增加安全强度,在点击图片时更新新的图片验证码,记录此功能,以便后期使用. 2. 示例 2.1 vue示例代码 <templat ...
- C#结婚吧(if else if)
- html学习——基础分类总结
1. html 超文本标记语言HyperText Markup Language.html文档基本结构: <!DOCTYPE html><head> <! ...
- swift 学习- 27 -- 访问控制
// 访问控制 可以限定其源文件 或模块中的代码对你的代码的访问级别, 这个特性可以让我们隐藏代码的一些实现细节, 并且可以为其他人可以访问和使用的代码提供接口 // 你可以明确地给某个类型 (类, ...
- Windows下Oracle 11g创建数据库
以前开发的时候用得比较多的是mysql和sql server,oracle用的比较少,用起来比较生疏,mysql和sql server用起来比较类似,就oracle的使用方式和他们不同,oracle在 ...
- Windows Service 2012 R2 下如何建立ftp服务器
1.首先在本地机器上创建一个用户!这些用户是用来登录到FTP的!我的电脑右键->管理->本地用户和组->用户->“右键”新建用户->输入用户名和密码再点创建就行了! 2. ...
- linux之各目录作用
/opt目录 目录用来安装附加软件包,用户调用软件包程序放在目录/opt/package_name/bin下,package_name是安装软件包的名称 /etc目录 是用来放一些核心的配置文件 附各 ...
- vivado 下安装modelsim
安装modelsim 下载链接:http://pan.baidu.com/s/1i4vHDbR 密码:dksy 1.运行modelsim-win64-10.4-se.exe,安装软件: 注意事项:安装 ...
- vue 之webpack打包工具的使用
一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.c ...