css-loader rompu avec l'animation de modules et d'images-clés

Question

J'essaye d'utiliser des animations d'images-clés dans une application de réaction qui utilise css-modules et un système de compilation webpack.

exemple Simplest qui reproduit le problème:

.confirmRemove { 
    animation: 150ms appear ease-in; 
} 
@keyframes appear { ... } 

Compilé à:

.comparators__confirmRemove__32JB0 { 
    -webkit-animation: 150ms :local(appear) ease-in; 
    animation: 150ms :local(appear) ease-in; 
} 

@keyframes comparators__appear__KTI43 { ... } 

ce qu'elle devrait être:

.comparators__confirmRemove__32JB0 { 
    -webkit-animation: 150ms comparators__appear__KTI43 ease-in; 
    animation: 150ms comparators__appear__KTI43 ease-in; 
} 

@keyframes comparators__appear__KTI43 { ... } 

choses que je l'ai fait

1. divers usages Tentatives de saupoudrage: local autour de la place
2. trouvé une demande d'émission ouverte 539 mais aucune action ou les réponses dans le passé semaine
3. versions Tentatives 28,1 (dernier), 27,3, et a vu 26 doesn « t travailler soit
4. contemplait abandonner le développement web
5. sur demande commentés traction
6. toutes les étapes avec tentatives question 264

Ce que je dois

Une version connue de css-chargeur qui fonctionne pour les animations et les images clés des modules CSS ou un travail autour jusqu'à c'est fixé par les auteurs.

Autres informations pertinentes

Version 7.9 Noeud

package.json pertinente actuelle:

"autoprefixer": "7.1.1", 
    "css-loader": "0.28.1", 
    "extract-text-webpack-plugin": "2.1.0", 
    "file-loader": "0.11.1", 
    "node-sass": "4.5.3", 
    "sass-loader": "6.0.5", 
    "style-loader": "0.18.1", 
    "url-loader": "0.5.8", 
    "webpack": "2.5.1", 
    "webpack-bundle-analyzer": "2.8.2", 
    "webpack-dev-middleware": "1.10.2", 
    "webpack-hot-middleware": "2.18.0", 
    "webpack-md5-hash": "0.0.5" 

section webpack actuelle pertinente:

{ 
     test: /(\.css|\.scss|\.sass)$/, 
     use: [ 
      {loader: 'style-loader'}, 
      { 
      loader:'css-loader', 
      options:{ 
       sourceMap:true, 
       modules: true, 
       localIdentName: '[local]---[hash:base64:5]' 
      } 
      }, 
      { 
      loader: 'postcss-loader', 
      options:{ 
       sourceMap: true, 
       plugins:()=>[ 
       autoprefixer() 
       ] 
      } 
      }, 
      { 
      loader: 'sass-loader', 
      options:{ 
       sourceMap:true, 
       includePaths: [path.resolve(__dirname, 'src', 'scss')] 
      } 
      } 
     ] 
     } 

Answer 1

Je crois que vous devez mettre le nom de t l'animation en premier

# this 
    animation: appear 150ms ease-in; 

# not this 
    animation: 150ms appear ease-in; 

Votre nom est correct. J'ai vu beaucoup d'erreurs autour des conflits de nommage et d'animation des noms, mais cela ne semble pas être votre problème.