Подтвердить что ты не робот

Как получить исходные файлы для модулей React Css?

Я пытаюсь настроить проект React с react-css-modules, webpack и Замена горячего модуля. Все работает как шарм, но я не могу заставить исходные карты CSS работать.

Я выполнил это руководство, чтобы сделать работу HMR. Он включает в себя настройку BrowserSync для обновления файла css после того, как Webpack записывает его на диск.

Я использую (как предложено реакционными css-модулями) 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. в моей консоли браузера.

Вы можете найти мой пример repo здесь, но здесь полная конфигурация 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']
  }
};

Как сделать работу с исходной картой?

4b9b3361

Ответ 1

Используйте это:

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

то есть. добавьте параметр sourceMap к загрузчикам css и sass. Он сказал это в документах sass-loader.

Ответ 2

Вот как я настроил свои модули css:

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