Kompilierter Sass hat seltsame Klassennamen geändert. Webpack 2 ExtractTextPlugin

Question

Also habe ich diesen Code unten in meinem webpack 2 config. Es scheint anders zu funktionieren als es meine CSS-Klassennamen zu ändern.

Module:

test: [/\.scss$/, /\.sass$/], 
loader: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
    { 
     loader: 'css-loader', 
     options: { 
     modules: true, 
     } 
    }, 
    { 
     loader: 'postcss-loader', 
     options: { 
     importLoaders: 1 
     } 
    }, 
    { 
     loader: 'sass-loader' 
    }, 
    ], 
}), 

Plugins:

new ExtractTextPlugin({ 
    filename: 'global.css', 
    allChunks: true, 
}), 

CSS in global.css Ausgegeben:

._346v3lRS9p5yMQOIqOJas_ { 
    max-width: 100%; 
    height: auto; } 

._3jLdPG7qJYZI8jVfnpr2sy { 
    padding: 0.25rem; 
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-radius: 0.15rem; 
    transition: all 0.2s ease-in-out; 
    max-width: 100%; 
    height: auto; } 

._28w9sGKbZxXO8saGymF0cf { 
    display: inline-block; } 

Was das wird bewirkt, dass?

Etwas zu beachten ist, ich, wenn ich die Module heraus ExtractTextPlugin ändern aussehen, damit es diese mit den CSS-Klassennamen nicht tut und sieht gut aus:

{ 
    test: [/\.scss$/, /\.sass$/], 
    loader: ExtractTextPlugin.extract({ 
    fallbackLoader: 'style-loader', 
    loader: `css-loader?moudules=true&!postcss-loader?importLoaders=1!sass-loader?`, 
    }), 
}, 

So bin ich wirklich gespannt, was ist geht es weiter?

Answer 1

{ 
    test: [/\.scss$/, /\.sass$/], 
    use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
     { 
     loader: 'css-loader', 
     options: { 
      importLoaders: 2, 
     } 
     }, 
     { 
     loader: 'postcss-loader', 
     options: { 
     } 
     }, 
     { 
     loader: 'sass-loader' 
     }, 
    ], 
    }), 
}, 

Fix änderte den Code nach oben. Das große war das Entfernen der Module von css-loader.

Answer 2

Dies wird über die Eigenschaft "localIdentName" von "css-loader" gesteuert. Standardmäßig parst du deine Klassennamen auf diese Struktur. Sie können es überschreiben, indem mit so etwas wie:

{ 
 
     loader: 'css-loader', 
 
     options: { 
 
     localIdentName: '[name]--[hash:base64:5]', 
 
     modules: true 
 
     } 
 
    }