CSS Module解决全局或本地使用@keyframes无效问题
最近使用CSSModule开发react项目,遇到一个问题,使用@keyframes无效,问题如下
/** less + css module **/
:global {
.effect-bottom {
animation: globeRotate 0.5s linear infinite;
} @keyframes globeRotate {
from {
transform: rotate(0deg);
} to {
transform: rotate(-360deg);
}
}
} /** 编译结果如下 **/
.pages-style-gameWrap .effect-bottom {
top: auto;
bottom:;
animation: globeRotate 0.5s linear infinite;
}
@keyframes pages-style-globeRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
可以看到 @keyframes 名称也被编译了,这样就获取不到 @keyframes 的名称了,解决办法如下(只需在调用@keyframes的元素后面添加 :local 就行了):
:global {
.effect-bottom :local {
animation: globeRotate 0.5s linear infinite;
} @keyframes globeRotate {
from {
transform: rotate(0deg);
} to {
transform: rotate(-360deg);
}
}
} /** 编译结果如下 **/
.pages-style-gameWrap .effect-bottom {
top: auto;
bottom:;
animation: pages-style-globeRotate 0.5s linear infinite;
}
@keyframes pages-style-globeRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
CSS Module解决全局或本地使用@keyframes无效问题的更多相关文章
- Vue中scoped css和css module比较
scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </st ...
- 同时使用antd和css module
同时编译antd和css module,需要设置两次less识别. { test: /\.less$/, exclude: path.resolve(__dirname, './node_module ...
- webpack项目轻松混用css module
前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css mo ...
- 如使用Typescript撸Vue(Vue2 + TS +TSX+CSS module)
Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝.期待Vue3.0会用TS重构且会有较大改进.不过目前有一些第三方的库可以曲线优化对TS的支持.主要就介绍下过下面两个库来写Vue. 总 ...
- css module
来源:CSS Modules 用法教程 后面项目地址:https://github.com/947133297/lwj-webpack-demo 关键是打开这一行,表示开启loader的css mod ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- Flex各类型坐标转换(全局、本地、内容坐标间转换)
Flex包含3种坐标:全局坐标.本地坐标.内容坐标 全局坐标:stage级别,坐标原点为舞台的左上角,如MouseEvent的stageX.stageY坐标. 本地坐标:组件级别的坐标系,相对坐标,坐 ...
- 解决Maven关于本地jar包的打包处理
在使用maven进行jar包管理时,通过我们都是通过maven去下载一些jar包,但有些jar在maven上没有,所以就就可能在本地直接手动加入一些需要用到的外部jar包.但如果我们用maven pa ...
- 【JAVAWEB学习笔记】24_filter实现自动登录和解决全局的编码问题
过滤器Filter 学习目标 案例-自动登录 案例-解决全局的编码 一.过滤器Filter 1.filter的简介 filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标 ...
随机推荐
- Nginx 究竟如何处理事件?
在了解了网络事件以及事件分发收集器以后,让我们来了解 Nginx 是怎么样处理事件的? Nginx 事件循环 当 Nginx 刚刚启动时,在等待事件部分,也就是打开了 80 或 443 端口,这个时候 ...
- Linux 查看实时网卡流量的方法 sar nload iftop
1.sar 计量脚本 sar(System Activity Reporter 系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,包括:文件的读 ...
- webpack4的配置你都掌握了么?
webpack5都出了,webpack4的的基本配置,解析ES6,引入CSS,编译Less,设置image等等,你都会了么? 解析ES6 了解Babel Babel是一个JavaScript编译器, ...
- owa部署
新建一台win server 2012(注意如果是2008要补丁) 配置静态ip DNS指向ad域的ip 测试: ping 下ad域的域名,是通的继续 把本机加入到ad域 重启下 用admin登陆: ...
- docker-网桥
使用桥接网络 在网络方面,桥接网络是链路层设备,它在网络段之间转发流量. 网桥可以是硬件设备或在主机内核中运行的软件设备. Docker而言,桥接网络使用软件桥接器,该软件桥接器允许连接到同一桥接网络 ...
- Centos7下创建和管理用户
centos服务管理主要命令是systemctl,centos7的服务不再放在/etc/init.d/下;而放在/usr/lib/systemd/system下,centos7系统中systemctl ...
- Python学习中的“按位取反”笔记总结
| 疑惑 最近在学习Python的过程中了解到位运算符,但对于按位取反有点迷糊,就比如说~9(按位取反)之后的结果是-10,为什么不是6呢?所以下面就来看看为什么不是6,正确结果是如何计算出来的呢? ...
- C语言之数组用法总结
一维数组的定义:1.数组的数据类型:每一元素占内存空间的字节数.2.数组的存储类型:内存的动态. 静态存储区或CPU的寄存器.3.一维数组在内存中占用的字节数为:数组长度X sizeof (基类型). ...
- 简单 hash 入门题目
题目描述 NOIP 复赛之前,HSD 桑进行了一项研究,发现人某条染色体上的一段 DNA 序列中连续的 kkk 个碱基组成的碱基序列与做题的 AC 率有关!于是他想研究一下这种关系.现在给出一段 DN ...
- Nginx的一理解(1)
1.请解释一下什么是Nginx? 答:Nginx是一个web服务器和反向代理服务器,用于HTTP.HTTPS.SMTP.POP3和IMAP协议. 2.请列举Nginx的一些特性? 答:Nginx服务器 ...