Как получить исходные файлы для модулей 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']
}
};
Как сделать работу с исходной картой?
Ответы
Ответ 1
Используйте это:
ExtractTextPlugin.extract('style','css?sourceMap&modules&importLoaders=1&localIdentName=[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]!',