2017-01-03 10 views
0

ich webpack Config von hier genommen haben:webpack ist meine SCSS Klassen Umbenennung

https://github.com/erikras/react-redux-universal-hot-example 
  1. Für die Serienversion, machte ich die vorgeschlagenen Änderungen und jetzt die Lader weniger, SCSS und CSS aussehen diese

     { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')}, 
         { test: /\.less$/, loader: 'style!css?importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' }, 
         { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') } 
    
  2. ich lade Sheets erfordern Verwendung dh

    require (‚../ pathToSCSSSTylSheet‘)

CSS wird gerade fein geladen, aber SCSS Klassen sind Umbenennungen im Finale Sheet von webpack hergestellt und so Klassen nie angewendet bekommen. Wie höre ich auf, diese scss-Klassen umzubenennen?

Ich habe &localIdentName=[local]___[hash:base64:5] genommen und versucht, es zu halten, aber die Klassen umbenannt werden sowieso

Antwort

0

modules Option entfernen, diese CSS-Module aktivieren.

siehe https://github.com/webpack/css-loader#user-content-css-modules für weitere Details.

Wenn Sie nicht wollen, modules Option entfernen, werden Sie wie this verwenden können:

import styles from './app.scss'; 
export default class InfoBar extends Component{ 
    render(){ 
    const styles = require('./InfoBar.scss'); 
    return (
     <span className={styles.time}>10:00</span> 
    ); 
} 
} 
1

Sie importieren können die Stile wie dieses

:global { 
    @import 'scss_path'; 
} 

Es Stile als globale Stile importiert, So erhalten Sie scss-Klassen ohne umbenannt zu werden.