最近使用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无效问题的更多相关文章

  1. Vue中scoped css和css module比较

    scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </st ...

  2. 同时使用antd和css module

    同时编译antd和css module,需要设置两次less识别. { test: /\.less$/, exclude: path.resolve(__dirname, './node_module ...

  3. webpack项目轻松混用css module

    前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css mo ...

  4. 如使用Typescript撸Vue(Vue2 + TS +TSX+CSS module)

    Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝.期待Vue3.0会用TS重构且会有较大改进.不过目前有一些第三方的库可以曲线优化对TS的支持.主要就介绍下过下面两个库来写Vue. 总 ...

  5. css module

    来源:CSS Modules 用法教程 后面项目地址:https://github.com/947133297/lwj-webpack-demo 关键是打开这一行,表示开启loader的css mod ...

  6. [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  ...

  7. Flex各类型坐标转换(全局、本地、内容坐标间转换)

    Flex包含3种坐标:全局坐标.本地坐标.内容坐标 全局坐标:stage级别,坐标原点为舞台的左上角,如MouseEvent的stageX.stageY坐标. 本地坐标:组件级别的坐标系,相对坐标,坐 ...

  8. 解决Maven关于本地jar包的打包处理

    在使用maven进行jar包管理时,通过我们都是通过maven去下载一些jar包,但有些jar在maven上没有,所以就就可能在本地直接手动加入一些需要用到的外部jar包.但如果我们用maven pa ...

  9. 【JAVAWEB学习笔记】24_filter实现自动登录和解决全局的编码问题

    过滤器Filter 学习目标 案例-自动登录 案例-解决全局的编码 一.过滤器Filter 1.filter的简介 filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标 ...

随机推荐

  1. Nginx 究竟如何处理事件?

    在了解了网络事件以及事件分发收集器以后,让我们来了解 Nginx 是怎么样处理事件的? Nginx 事件循环 当 Nginx 刚刚启动时,在等待事件部分,也就是打开了 80 或 443 端口,这个时候 ...

  2. Linux 查看实时网卡流量的方法 sar nload iftop

    1.sar 计量脚本 sar(System Activity Reporter 系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,包括:文件的读 ...

  3. webpack4的配置你都掌握了么?

    webpack5都出了,webpack4的的基本配置,解析ES6,引入CSS,编译Less,设置image等等,你都会了么? ​解析ES6 了解Babel Babel是一个JavaScript编译器, ...

  4. owa部署

    新建一台win server 2012(注意如果是2008要补丁) 配置静态ip DNS指向ad域的ip 测试: ping 下ad域的域名,是通的继续 把本机加入到ad域 重启下 用admin登陆: ...

  5. docker-网桥

    使用桥接网络 在网络方面,桥接网络是链路层设备,它在网络段之间转发流量. 网桥可以是硬件设备或在主机内核中运行的软件设备. Docker而言,桥接网络使用软件桥接器,该软件桥接器允许连接到同一桥接网络 ...

  6. Centos7下创建和管理用户

    centos服务管理主要命令是systemctl,centos7的服务不再放在/etc/init.d/下;而放在/usr/lib/systemd/system下,centos7系统中systemctl ...

  7. Python学习中的“按位取反”笔记总结

    | 疑惑 最近在学习Python的过程中了解到位运算符,但对于按位取反有点迷糊,就比如说~9(按位取反)之后的结果是-10,为什么不是6呢?所以下面就来看看为什么不是6,正确结果是如何计算出来的呢? ...

  8. C语言之数组用法总结

    一维数组的定义:1.数组的数据类型:每一元素占内存空间的字节数.2.数组的存储类型:内存的动态. 静态存储区或CPU的寄存器.3.一维数组在内存中占用的字节数为:数组长度X sizeof (基类型). ...

  9. 简单 hash 入门题目

    题目描述 NOIP 复赛之前,HSD 桑进行了一项研究,发现人某条染色体上的一段 DNA 序列中连续的 kkk 个碱基组成的碱基序列与做题的 AC 率有关!于是他想研究一下这种关系.现在给出一段 DN ...

  10. Nginx的一理解(1)

    1.请解释一下什么是Nginx? 答:Nginx是一个web服务器和反向代理服务器,用于HTTP.HTTPS.SMTP.POP3和IMAP协议. 2.请列举Nginx的一些特性? 答:Nginx服务器 ...