[转] 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 ...
随机推荐
- boost.log在项目中应用
//头文件#pragma once #include <string> #include <boost/log/trivial.hpp> using std::string; ...
- 题解-CodeForces700E Cool Slogans
Problem 题目链接 题目大意:给定一个字符串,每次取出出现至少两次的子串替换原串,问最多能替换多少次,输出答案加一(字符串长为\(2×10^5\)) Solution 前置技能:SAM.线段树合 ...
- windows类书的学习心得
原文网址:http://www.blogjava.net/sound/archive/2008/08/21/40499.html 现在的计算机图书发展的可真快,很久没去书店,昨日去了一下,真是感叹万千 ...
- POJ 1741 Tree 树上点分治
题目链接:http://poj.org/problem?id=1741 题意: 给定一棵包含$n$个点的带边权树,求距离小于等于K的点对数量 题解: 显然,枚举所有点的子树可以获得答案,但是朴素发$O ...
- 021_nginx动态upstream检查
GET: 请求指定的页面信息,并返回实体主体.HEAD: 只请求页面的首部. #参考:http://tengine.taobao.org/document_cn/http_upstream_check ...
- mybatis:自动分页插件
项目地址:https://github.com/pagehelper/pagehelper-spring-boot 简单使用: 1.在pom文件中添加 <dependency> <g ...
- Ex3_2 最近点对
原文链接http://blog.csdn.net/zyang008/article/details/6175587 分治法 1)算法描述:已知集合S中有n个点,分治法的思想就是将S进行拆分,分为2部分 ...
- Day6------------软连接和硬链接
一.块 1.操作系统分四大类块 super block 掌管全局 inode block directory block block 2.删文件 普通删除只是删除链接,数据还在硬盘 彻底删除:覆盖操作 ...
- python-socket编程(入门,网络基础)
一.网络基础 网络建立的目的是为了数据交互(通信) 如何实现通信: 1.建立好底层的物理连接介质 2.有一套统一的通信标准,称之为互联网协议 1.osi七层协议 互联网协议按照功能的不同分为osi七层 ...
- c# 操作Word总结(车)
在医疗管理系统中为保存患者的体检和治疗记录,方便以后的医生或其他人查看.当把数据保存到数据库中,需要新建很多的字段,而且操作很繁琐,于是想到网页的信息创建到一个word文本中,在显示的时,可以在线打开 ...