我正在嘗試使用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']
}
};
如何使源圖工作?
可能聽起來很愚蠢,但這又如何呢? '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