如何獲取源映射爲React Css模塊工作？

我正在嘗試使用react-css-modules，webpack和Hot Module Replacement設置React項目。一切工作都像一個魅力，但我無法讓CSS源代碼工作。我跟着this guide使HMR工作。它涉及一個BrowserSync安裝程序，在Webpack將其寫入磁盤後更新該css文件。如何獲取源映射爲React Css模塊工作？

我使用ExtractTextPlugin（由反應-CSS-模塊所建議的），以提取所有的CSS：

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

但是，如果我更改爲sourcemaps，所建議的here

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

我在我的瀏覽器控制檯中看到錯誤："root" CSS module is undefined.。

你可以找到我的示例repo here，但這裏是我用於開發的完整的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'] 
    } 
};

如何使源圖工作？

來源

2015-12-23 Tieme

可能聽起來很愚蠢，但這又如何呢？ 'ExtractTextPlugin.extract（'style'，'css？sourceMap＆modules＆importLoaders = 1＆localIdentName = [name] __ [local] ___ [hash：base64：5]！sass？sourceMap'）' – Louy

$ @ ##＆$ me ..的確工作。我會發誓我已經嘗試過......儘管如此，非常感謝。你可以加這個作爲答案，以便我可以獎勵你的賞金？ – Tieme

也增加了一些文檔。 https://github.com/gajus/react-css-modules/pull/72 :) – Tieme

使用此：

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

即sourceMap PARAM同時添加到css & sass裝載機。它在sass-loader docs中這樣說。

來源

2015-12-29 19:18:39 Louy

我這是怎麼了我的CSS模塊設置：

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

來源

2015-12-29 10:35:08 Emmanuel

這將工作，只要你不使用react-css模塊或不需要熱重新加載這些模塊。在這些情況下，您需要ExtractTextPlugin。 – Tieme

@Tieme那是不正確的。我爲傳播這種誤解而道歉。我更新了文檔（https://github.com/gajus/react-css-modules#webpack）並更新了相關主題的討論主題（https://github.com/gajus/react-css-modules/issues/51＃issuecomment-181660058）。 – Gajus

謝謝！沒問題：） – Tieme

如何獲取源映射爲React Css模塊工作？

回答

相關問題