CODEWITHSUNDEEP
webpack
systemdebt
systemdebt

Reputation: 4941

webpack is renaming my scss classes

I have taken webpack config from here:

https://github.com/erikras/react-redux-universal-hot-example

  1. For the production version, I made the suggested changes and now the loaders for less ,scss and css look like this

          { 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. I am loading stylesheets using require i.e

    require('../pathToSCSSSTylSheet')

CSS gets loaded just fine but scss classes are renames in the final stylesheet produced by webpack and so classes never get applied. How do I stop renaming of these scss classes?

I have taken &localIdentName=[local]___[hash:base64:5] and tried keeping it too but the classes are renamed anyway

Upvotes: 1

Views: 3855

Answers (2)

Hariks
Hariks

Reputation: 1889

You can import the styles like this

:global { 
  @import 'scss_path';
}

It will import styles as global styles, so you will get scss classes without being renamed.

Upvotes: 4

wuxiandiejia
wuxiandiejia

Reputation: 861

remove modules option,this enable CSS Modules.

see https://github.com/webpack/css-loader#user-content-css-modules for more details.

If you don't want to remove modules option, you can use like this:

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>
   );
 }
}

Upvotes: 2

Related Questions