Webpack 正在修改我的 .scss 样式表类

Question

我正在使用带有 npm 和 react.js 的 webpack，并且我有我的 style.scss 样式表来控制我的样式等。我知道由于“webpack 的东西”它被合并到一个大的 .css 文件中，但我'总是无法正确使用类/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") 起作用。这个奇怪的字符串会持续刷新页面，所以我认为在我的代码中使用它是“安全的”，但是为什么 webpack 会像这样混淆类名？有没有办法阻止它这样做？还是这就是它的“本意”？

这是我的 webpack 配置：

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

webpack 配置中的 Css 模块是转换类名的模块。这是一个非常酷的模块，但如果您想正确使用它，请阅读文档https://github.com/css-modules/css-modules 更好地阅读。否则删除它