Question

我正在使用带有npm和react.js的webpack，我有我的style.scss样式表来控制我的样式等等。我知道它因为'webpack stuff'而被合并为一个大的.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。否则将其删除

Webpack正在破坏我的.scss样式表类

1 个答案: