Noms de classe plus sympa dans PostCSS

Question

Je construis mon application en utilisant Webpack 2. J'utilise PostCSS 2 pour les modules CSS. Voici ma configuration CSS pour l'importation Webpack:

{ 
    test: /\.css$/, 
    exclude: /(node_modules)/, 
    use: [ 
     'style-loader', 
     { 
     loader: 'css-loader', 
     options: { 
      modules: true, 
      importLoaders: 1, 
     }, 
     }, 
     { 
     loader: 'postcss-loader', 
     options: { 
      plugins: loader => [ 
      require("postcss-import")({ 
       path: './js', 
       addDependencyTo: webpack, 
      }), 
      require('postcss-cssnext')(), 
      ], 
     }, 
     }, 
    ], 
    }, 

Maintenant, le problème est que cela génère vraiment les noms de classe laid. Exemple d'utilisation React:

import React, {Component} from 'react'; 
import styles from './Element.css'; 

export default class Element extends Component{ 
    render(){ 
    return (
     <div className={styles.myElement}>This is an example.</div> 
    ); 
    } 
} 

Renders en:

<div class="_1DHVkmCxFFQMFYac-L_MIg">This is an example.</div> 

Maintenant, cela est bien beau dans la production, mais dans le développement, quelque chose comme class="myElement--_1DHVkmCxFFQMFYac-L_MIg" serait beaucoup plus agréable. J'ai trouvé un GitHub issue en discuter, mais comme je suis nouveau à Webpack, je ne pouvais pas comprendre comment implémenter leur suggestion. Tout ce que j'ai essayé a entraîné une erreur, où Webpack n'a pas pu résoudre le module.

J'ai essayé d'ajouter localIdentName: '[local]--[hash:base64:5]' à postcss-loader options, mais cela n'a rien fait. Par conséquent, comment puis-je conserver le nom de classe d'origine dans le nom de classe généré?

Answer 1

L'ajout de cette ligne au css-loader a résolu:

localIdentName: debug ? '[name]_[local]___[hash:base64:10]' : undefined, 

Answer 2

{ 
    loader: 'css-loader', 
    options: { 
     modules: true, 
     importLoaders: 1, 
     minimize: false, //this line!! 
    }, 
    }, 

Vous pouvez utiliser minimiser:! IsDebug et isDebug est un booléen pour savoir si vous déboguez ou non. mais la mise à false devrait laisser « jolis noms »