diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 7536b13892c572af90fe2a008d7b9be86b85e638..987e7a3570c23807334454a63fd887173a29bd5d 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -219,6 +219,9 @@ module.exports = { { loader: require.resolve('postcss-loader'), options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index f31fd3ebf9f9f09cac82a6d5c6903f09e62e759c..1ba1307bb3e3a91dab57f075338bee0cb4ee4241 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -228,6 +228,9 @@ module.exports = { { loader: require.resolve('postcss-loader'), options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index 63ecaf90db819aadd1eb52b6eb87f8e7b7236ef1..b8500f804b11808331ee4ee9ea56074b7389f467 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -6,6 +6,7 @@ "chai": "3.5.0", "jsdom": "9.8.3", "mocha": "3.2.0", + "normalize.css": "7.0.0", "prop-types": "15.5.6", "test-integrity": "1.0.0" } diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index bda69cc61afc75a62350cd947bcc7602ff348976..e3845e79e429ca7b69c7da502f49f09b9a88c113 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -17,6 +17,9 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + ).to.match(/html\{/); + expect( + doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') ).to.match(/#feature-css-inclusion\{background:.+;color:.+}/); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css index c399d1acada649c2a52f3f82e1278cbb4c1522a2..9502cfaa121a67944b8f677b88eeefc547d5ce1a 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css @@ -1,3 +1,9 @@ +/* + * Ensure CSS inclusion doesn't regress + * https://github.com/facebookincubator/create-react-app/issues/2677 + */ +@import '~normalize.css/normalize.css'; + #feature-css-inclusion { background: palevioletred; color: papayawhip;