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是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标 ...
随机推荐
- TCP状态机:当服务端主动发FIN进TIME_WAIT,客户端源端口复用会发生什么
0X01 正常情况下TCP连接会通过4次挥手进行拆链(也有通过RST拆除连接的可能,见为什么服务器突然回复RST--小心网络中的安全设备),下图TCP状态机展示了TCP连接的状态变化过程: 我们重点看 ...
- 1055 集体照 (25 分)C语言
拍集体照时队形很重要,这里对给定的 N 个人 K 排的队形设计排队规则如下: 每排人数为 N/K(向下取整),多出来的人全部站在最后一排: 后排所有人的个子都不比前排任何人矮: 每排中最高者站中间(中 ...
- 在Mac/linux上查找(并终止)进程锁定特定端口的几种方法
前言 无论是做网站还是做产品,经常使用到杀死某个进程的方法.制作脚本并熟悉运用是一个非常节省时间的方法. 基本命令 查找: [sudo] lsof -i :3000 杀戮 kill -9 方法一 ...
- TypeScript 源码详细解读(1)总览
TypeScript 由微软在 2012 年 10 月首发,经过几年的发展,已经成为国内外很多前端团队的首选编程语言.前端三大框架中的 Angular 和 Vue 3 也都改用了 TypeScript ...
- 记录一次mybatis genertor使用以及mapper扫描遇见的问题
本记录适用初次接触mybatis,大神忽略... 整体上分两个部分: 1.使用mybatis genertor自动生成代码 2.mapper的扫描 1.使用mybatis genertor自动生成代码 ...
- APP开通支付宝支付 转账功能
注意:支付宝单笔转账到账户功能的准入条件 首先要在商家中心注册,从商家中心可以跳转到开放平台. 登陆蚂蚁金服开放平台 1 开发中心->网页&移动应用 2 根据需求选择应用类型创建应用 3 ...
- express项目创建
npm install express-generator -g 全局安装express生成器 express -h 帮助中心 express 项目名 npm i 安装依赖 nod ...
- springcloud复习2
Hystrix断路器 Hystrix是一个用于处理分布式系统的延迟和容错的开源库,在分布式系统里,许多依赖不可避免的会调用失败,比如超时.异常等,Hystrix能够保证在一个依赖出问题的情况下,不会导 ...
- Git将一个项目同时从本地推送到GitHub和Gitee
前言 博主是根据自己的情况写这篇博文的,每个人遇到的情况和需求可能不一样哈,所以初始的步骤也不一定一致,但是同时推送到Github和Gitee的步骤都会是一致滴! Gitee拉取Github仓库 直接 ...
- MOS 常用链接地址
主页面类 Exadata主页面 Exadata Database Machine and Exadata Storage Server Supported Versions (Doc ID 8888 ...