Webpack正在改变我的.scss样式表类
我使用npm和react.js的webpack，我有我的style.scss样式表来控制我的风格，等等。我知道它被合并成一个大的.css文件，因为'webpack东西'，但我一直未能正确使用classes / id。 我发现了为什么。 这，在我的style.scss表：
/* List items when hovered. */ ul li.hovered{ background-color: #F8F8F8; color: #7B8585; } 变为：
/* List items when hovered. */ ul li.style__hovered___j0Fpj { background-color: #F8F8F8; color: #7B8585; }
在组合的style.css文件中。 这解释了为什么如果我尝试手动设置一个类，例如$('#id').toggle("hovered")它不起作用，但$('#id').toggle("style__hovered___j0Fpj") 。 这个奇怪的string持续刷新页面，所以我认为在我的代码中使用它是“安全的”，但是为什么webpack会破坏这样的类名？ 有没有办法阻止它这样做？ 或者这就是它的“本意”？
这是我的webpackconfiguration：
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] };
你的webpackconfiguration中的Css模块是转换你的类名的模块。 这是一个非常酷的模块，但如果你想正确使用它，请阅读文档https://github.com/css-modules/css-modules 。 否则删除它