Javascript CSS关键帧在开发环境中工作正常，但在生产构建中却不能_Javascript_Reactjs_Webpack_Sass_Create React App

Javascript CSS关键帧在开发环境中工作正常，但在生产构建中却不能

javascript reactjs webpack sass

Javascript CSS关键帧在开发环境中工作正常，但在生产构建中却不能,javascript,reactjs,webpack,sass,create-react-app,Javascript,Reactjs,Webpack,Sass,Create React App,我正在开发一个应用程序，它使用节点sass来编译scs。我的组件结构如下所示： ./src |-- components | |-- Foo | | |-- Foo.jsx | | `-- Foo.scss | |-- Bar | |-- Bar.jsx | `-- Bar.scss [...] 然后我就这样给我的SCS打电话： import React, {useState} from 'react'; import './Foo.scss';

我正在开发一个应用程序，它使用节点sass来编译scs。我的组件结构如下所示：

./src
|-- components
|   |-- Foo
|   |   |-- Foo.jsx
|   |   `-- Foo.scss
|   |-- Bar
|       |-- Bar.jsx
|       `-- Bar.scss
[...]

然后我就这样给我的SCS打电话：

import React, {useState} from 'react';
import './Foo.scss';
[...]

当我运行dev构建时，我的所有转换都正常，但是当我运行build和deploy时，它们都丢失了。所有其他CSS样式都很好用，只是我的转换出错了。它们仍然存在，但都发生在最后一帧。因此，如果一个转换应该在200毫秒内从0变为100，它仍然会发生，但在最后一个可能的帧内它会从0变为100

谁能给我指出正确的方向吗？这是我的package.json：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-map-gl": "^5.2.7",
    "react-map-gl-geocoder": "^2.0.12",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

编辑：根据要求，以下是我的转换示例：


.fade-in {
    animation: fade-in ease-in 0.25s,
    slide-in ease-in 0.25s;
}

@keyframes fade-in {
    0% {
        opacity: 0%;
    }
    
    100% {
        opacity: 100%;
    }
}

@keyframes slide-in {
    0%{
        transform: translateY(50px);
    }
    100%{
        transform: translateY(0px);
    }
}

然后，我将根据状态有条件地添加类。

显示您的转换？谢谢，刚刚编辑了文章并添加了一个转换。

ease in

是否正确地传输到最终CSS中？如果将这两个

ease-in

替换为它们的显式形式

cubic bezier（0.42,0.0,1.0,1.0）

会发生什么？如果添加

动画计时功能：ease-in在每个0%{}
关键帧内？向我们展示您的转换？谢谢，刚刚编辑了文章并添加了一个转换。是否轻松
正确地转换到最终CSS中？如果将这两个ease-in
替换为它们的显式形式cubic bezier（0.42,0.0,1.0,1.0）
会发生什么？如果添加动画计时功能：ease-in在每个0%{}
关键帧内？