2017-09-27 6 views
0

J'utilise des modules css + SCSS avec une config webpack comme celui-ci (ajouté que la partie du chargeur le reste est assez standard):Webpack modules css ne randomisent noms de classe des importations déstructurés

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.(scss|css)$/, 
     loader: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader', 
     }), 
     } 
    ] 
    } 
} 

Alors, quand je « m importation de classes de style.scss:

.someClass { 
    color: red; 
} 

Comme ceci:

import { someClass } from './style.scss' 

Je terminerai avec les noms de classe comme ceci:

<div class="style__someClass___2njNO">...</div> 

Ceci est très utile pour les styles locaux, mais ne fonctionnera pas avec des choses qui repose sur des noms de classe exactes.

Est-il possible de distinguer en quelque sorte les importations déstructurés (comme ci-dessus) des importations comme ceci:

import 'somemodule/somestyle.css' 

Alors que les noms de classe dans la suite ne seront pas modifiés?

Je suis intéressé par n'importe quelle solution de contournement!

Répondre

1

Semble comme un exclude dans le chargeur ferait l'affaire.

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.(scss|css)$/, 
     loader: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader', 
     }), 
     exclude: /your-package-name/ 
     } 
    ] 
    } 
}