我正在尝试使用 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']
}
};
如何让源代码地图起作用?
ExtractTextPlugin.extract('style','css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap')
- Louay Alakkadcss
的sourceMap
参数存在时才能正常工作,而在sass
末尾没有该参数时却不能正常工作。这毫无道理... - Tieme