我试图建立一个阵营与项目react-css-modules,的WebPack和热模块的更换.一切都像魅力一样,但我不能让CSS源图工作.
我按照本指南制作了HMR.它涉及一个BrowserSync设置,用于在Webpack将其写入磁盘后更新css文件.
我使用(如react-css-modules建议)ExtractTextPlugin来提取所有的css:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
}
但是,如果我将其更改为源图,如此处所示
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass-loader output)
我收到错误:"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']
}
};
如何使源图工作？
用这个:
ExtractTextPlugin.extract('style','css?sourceMap&modules&importLoaders=1&localI??dentName=[name]__[local]___[hash:base64:5]!sass?sourceMap')
sourceMap即将param 添加到两个css&sassloaders.它在sass-loader文档中这么说.
京公网安备 11010802040832号 | 京ICP备19059560号-6 
