diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 94413653c1e..4869046e425 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -193,6 +193,7 @@ module.exports = { // in development "style" loader enables hot editing of CSS. { test: /\.(css|scss)$/, + exclude: paths.appNodeModules, use: [ require.resolve('style-loader'), { @@ -229,6 +230,30 @@ module.exports = { }, ], }, + { + test: /\.(css|scss)$/, + include: paths.appNodeModules, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 2, + }, + }, + { + loader: require.resolve('sass-loader'), + }, + { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', + }, + }, + ], + }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. @@ -299,4 +324,4 @@ module.exports = { performance: { hints: false, }, -}; \ No newline at end of file +}; diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 808c4abbc11..61c51dea896 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -190,6 +190,7 @@ module.exports = { // in the main CSS file. { test: /\.(css|scss)$/, + exclude: paths.appNodeModules, loader: ExtractTextPlugin.extract( Object.assign( { @@ -239,6 +240,42 @@ module.exports = { ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, + { + test: /\.(css|scss)$/, + include: paths.appNodeModules, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: require.resolve('style-loader'), + use: [ + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 2, + minimize: true, + sourceMap: true, + }, + }, + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: true, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', + }, + }, + ], + }, + extractTextPluginOptions + ) + ), + }, // "file" loader makes sure assets end up in the `build` folder. // When you `import` an asset, you get its filename. // This loader don't uses a "test" so it will catch all modules @@ -362,4 +399,4 @@ module.exports = { net: 'empty', tls: 'empty', }, -}; \ No newline at end of file +};