如何为React Css Modules启用sourcemaps？

Question

我正在尝试使用 react-css-modules、webpack 和 Hot Module Replacement 来设置 React 项目。一切都很顺利，但我无法使 CSS 的源映射正常工作。

我遵循了这篇教程来实现 HMR。它涉及到一个 BrowserSync 环境设置，在 Webpack 将 CSS 写入磁盘后更新 CSS 文件。

我按照 react-css-modules 建议使用 ExtractTextPlugin 来提取所有的 CSS：

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
}

但是，如果我按照这里建议的更改为使用sourcemaps

loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass-loader outputStyle=expanded&sourceMap=true&sourceMapContents=true')

我在浏览器控制台中看到了错误："root" CSS module is undefined.

你可以在这里找到我的示例代码库，但以下是我用于开发的完整Webpack配置。

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WriteFilePlugin = require('write-file-webpack-plugin').default;

module.exports = {
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client',
      './index.js'
    ]
  },
  devtool: 'cheap-module-source-map',
  debug: true,
  devServer: devServer,
  context: path.resolve(__dirname, './src'),
  output: {
    path: path.resolve(__dirname, './builds'),
    filename: '[name].js',
    publicPath: '/builds/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.OldWatchingPlugin(),
    new WriteFilePlugin(),
    new ExtractTextPlugin('[name].css', {
      allChunks: true
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.json']
  }
};

如何让源代码地图起作用？

- Tieme

---

可能听起来有些傻，但这个怎么样？ExtractTextPlugin.extract('style','css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap') - Louay Alakkad

$@##&$ 我.. 这确实可以工作。我能发誓我试过了... 无论如何非常感谢。你可以把这个加到答案里面吗，这样我就可以给你打赏了吗？ - Tieme

还添加了一些文档。https://github.com/gajus/react-css-modules/pull/72 :) - Tieme

奇怪..只有在css的sourceMap参数存在时才能正常工作，而在sass末尾没有该参数时却不能正常工作。这毫无道理... - Tieme

根据文档，您需要同时传递两个参数（https://github.com/jtangelder/sass-loader#source-maps）。已添加答案。很高兴能帮到您。 :) - Louay Alakkad

奇怪，两个都对我不起作用...待续... - Tieme

Answer 1

请使用以下内容：

ExtractTextPlugin.extract('style','css?sourceMap&modules&importLoaders=1&localI‌​dentName=[name]__[local]___[hash:base64:5]!sass?sourceMap')

即，在css和sass加载器中都添加sourceMap参数。在sass-loader文档中提到。

- Louay Alakkad

Answer 2

这是我的css模块设置方式：

这是我如何设置我的CSS模块：

'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!',

- Emmanuel

---

只要您不使用react-css-modules或不需要这些模块的热重载，那么这将起作用。在这些情况下，您需要使用ExtractTextPlugin。 - Tieme

@Tieme 这不是真的。我为传播这个误解道歉。我更新了文档（https://github.com/gajus/react-css-modules#webpack），并更新了相关主题的讨论线程（https://github.com/gajus/react-css-modules/issues/51#issuecomment-181660058）。 - Gajus

谢谢！没问题 :) - Tieme