[转] 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 ...
随机推荐
- Nand flash 三种类型SLC,MLC,TLC【转】
转自:https://blog.csdn.net/fc34235/article/details/79584758 转载自:http://diy.pconline.com.cn/750/7501340 ...
- sudo su 和 sudo -s【转】
sudo su 和 sudo -s 都是切换到root用户,不同的是 sudo su 环境用的是目标用户 (root)的环境 sudo -s 环境用的是当前用户本身的环境 转自 sudo su 和 s ...
- 题解-bzoj4061 CERC-2012Farm and Factory
Problem Please contact lydsy2012@163.com! 题意概要:给定\(n\)点\(m\)边无向图,设定两个起点为\(1,2\),现要求在图中增加一个点,并将这个点与其他 ...
- v-on 绑定自定义事件
每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue 的事件系统与浏览器的 EventTarget API ...
- $Django RESTful规范
一 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度 ...
- Centos7升级gcc版本方法之一使用scl软件集
Centos7 gcc版本默认4.8.3,Red Hat 为了软件的稳定和版本支持,yum 上版本也是4.8.3,所以无法使用yum进行软件更新,所以使用scl. scl软件集(Software Co ...
- 洛谷P4705 玩游戏 [生成函数,NTT]
传送门 这是两个月之前写的题,但没写博客.现在回过头来看一下发现又不会了-- 还是要写博客加深记忆. 思路 显然期望可以算出总数再乘上\((nm)^{-1}\). 那么有 \[ \begin{alig ...
- HTML_1
HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言,而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来 ...
- Markdown 简介及基础语法
一.Markdown 简介 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 二.Markdown 基础语法 1. Markdown ...
- Confluence 6 修改默认空间标识图片
空间标识图片在边栏上的站点目录(Sites Directory)中作为图标进行显示.默认的空间标识图片将会应用到所有的空间中,如果你没有自定义的空间标识被定义的话,请查看 Configure the ...