As I work with webpack, npm, and react.js, my style.scss stylesheet manages the styles of my project. However, I have been struggling to properly use classes and ids with it. The issue became clear when I noticed the transformation in my style.scss sheet:
/* List items when hovered. */
ul li.hovered{
background-color: #F8F8F8;
color: #7B8585;
}turns into:
/* List items when hovered. */
ul li.style__hovered___j0Fpj {
background-color: #F8F8F8;
color: #7B8585; }after being combined in the style.css file by webpack. This explains why trying to manually set a class like $('#id').toggle("hovered") doesn't work, but
$('#id').toggle("style__hovered___j0Fpj")Below is my webpack configuration:
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]
};