Webpack is mangling my .scss stylesheet classes

Question

I'm using webpack with npm and react.js, and I have my style.scss stylesheet that controls my styles, etc. I know it gets combined into one big .css file because of 'webpack stuff', but I've always failed to use classes/ids properly with it. I found out why. This, in my style.scss sheet:

 /* List items when hovered. */ ul li.hovered{ background-color: #F8F8F8; color: #7B8585; } 

becomes:

 /* List items when hovered. */ ul li.style__hovered___j0Fpj { background-color: #F8F8F8; color: #7B8585; } 

in the combined style.css file. This explains why if I try to manually set a class eg $('#id').toggle("hovered") it doesn't work, but $('#id').toggle("style__hovered___j0Fpj") does. This weird string lasts through refreshes of the page, so I assume it's "safe" to use this in my code, but why does webpack mangle class names like this?? Is there any way to stop it from doing that? Or is this just how it's "meant to be"?

Here's my webpack config:

 var path = require('path'); var webpack = require('webpack'); var autoprefixer = require('autoprefixer'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { devtool: 'eval', entry: [ 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './src/index' ], output: { path: path.join(__dirname, 'dist'), filename: 'index.js', publicPath: '/static/' }, resolve: { extensions: ['', '.jsx', '.scss', '.js', '.json'], modulesDirectories: [ 'node_modules', path.resolve(__dirname, './node_modules') ] }, node: { console: true, fs: 'empty', net: 'empty', tls: 'empty' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new ExtractTextPlugin('style.css') ], module: { noParse: /node_modules\\/json-schema\\/lib\\/validate\\.js/, loaders: [ { test: /\\.js$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'src') }, { test: /\\.png$/, loader: "url-loader?limit=100000" }, { test: /\\.jpg$/, loader: "file-loader" }, { test: /(\\.scss|\\.css)$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox') }, { test: /\\.json$/, loader: "json-loader" } ] }, postcss: [autoprefixer] }; 

Answer 1

Css modules in your webpack config is the module that is converting your classnames. It's a really cool module but if you want to use it properly have a better read at the docs https://github.com/css-modules/css-modules . Otherwise remove it