Add support for importing external stylesheets

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,
   },
-};
+};

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',
   },
-};
+};