create-react-app: @import-normalize does not work

Describe the bug

According to the documentation adding @import-normalize in index.css should reset the browser styles but apparently it does not work and gives error as:

Unknown at rule @import-normalizecss(unknownAtRules) Here is the image with @import-normalize

Did you try recovering your dependencies?

npm version - 6.14.4

Which terms did you search for in User Guide?

normalize css and reset css

Environment

System: OS: macOS 10.15.6 Binaries: Node: 12.18.0 - /usr/local/opt/node@12/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.8 - ~/dev/cph-trips/node_modules/.bin/npm Browsers: Chrome: 85.0.4183.121 Firefox: 76.0.1 Safari: 14.0 npmPackages: react: ^16.13.1 => 16.13.1 react-dom: ^16.13.1 => 16.13.1 react-scripts: 3.4.3 => 3.4.3

Steps to reproduce

Download create react app using npx create-react-app
Add @import-normalize in index.css

Expected behavior

Adding @import-normalize should reset the browser style and not show the unknown error

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 27
Comments: 26

Most upvoted comments

repro: https://codesandbox.io/s/import-normalize-doesnt-work-with-cra-p52f9

Workaround for posterity:

yarn add normalize.css
put import 'normalize.css' before other css imports in index.js

+11

corysimmons on Dec 31, 2020

Seeing as @import-normalize is part of csstools/postcss-normalize, I’d recommend their version of normalize.css instead, because it isn’t opinionated and is still supported (unlike the necolas/normalize.css fork):

yarn add @csstools/normalize.css
put import '@csstools/normalize.css' before other css imports in index.js

derekschinke on May 19, 2021

Thanks @corysimmons for the workaround.

nirmalathapa on Jan 3, 2021