Skip to content

Allow generation of CSS sourcemaps at development time #7114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Allow generation of CSS sourcemaps at development time #7114

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions packages/react-scripts/config/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const postcssNormalize = require('postcss-normalize');

// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
Expand All @@ -59,6 +60,13 @@ module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';

// When CSS sourcemaps are active, CSS modules are generated as Blobs, which
// creates a FOUC in development mode.
// Therefore they are deactivated by default. #5707
const shouldCreateCSSSourceMap =
(isEnvProduction && shouldUseSourceMap) ||
(isEnvDevelopment && process.env.DEV_CSS_SOURCEMAPS === 'true');

// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// In development, we always serve from the root. This makes config easier.
Expand Down Expand Up @@ -112,15 +120,15 @@ module.exports = function(webpackEnv) {
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
sourceMap: shouldCreateCSSSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
sourceMap: shouldCreateCSSSourceMap,
},
});
}
Expand Down Expand Up @@ -448,7 +456,7 @@ module.exports = function(webpackEnv) {
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
sourceMap: shouldCreateCSSSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
Expand All @@ -462,7 +470,7 @@ module.exports = function(webpackEnv) {
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
sourceMap: shouldCreateCSSSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
Expand All @@ -476,7 +484,7 @@ module.exports = function(webpackEnv) {
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
sourceMap: shouldCreateCSSSourceMap,
},
'sass-loader'
),
Expand All @@ -493,7 +501,7 @@ module.exports = function(webpackEnv) {
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
sourceMap: shouldCreateCSSSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
Expand Down