vre2h / normalize.md
Just import this inside the index.css:
@import-normalize;
how can do it if i’m working with scss?
RodolfoSilva commented Mar 29, 2021
@aljorgevi
I think this should work too. I don’t use scss directly, so I can’t be sure.
viknedus commented Aug 28, 2021
Just import this inside the index.css:
@import-normalize;
I got this error when using above code in index.css
Unknown at rule @import-normalize css(unknownAtRules) jitchie commented Sep 19, 2021
Unknown rule for normalize seems to be a recurring theme.
There are some work-arounds:
about to try this.
arjang-psh commented May 12, 2022
hoe can i import it if I use Styled components?
whossein commented Jul 1, 2022 •
i write @import-normalize; but not worked!
YuriyIzyurov commented Jul 7, 2022 •
It doesn’t work, Ant design styles is above normalize.css
skillwork-mdimitrov commented Aug 26, 2022 •
Just import this inside the index.css:
@import-normalize;
I got this error when using above code in index.css
Unknown at rule @import-normalize css(unknownAtRules) I also have the same IDE error but it does work for me at least.
When I inspect an element in the Dev tools it detects and applies the normalization
theitaliandev commented Oct 19, 2022 •
Just import this inside the index.css:
@import-normalize;
I got this error when using above code in index.css
Unknown at rule @import-normalize css(unknownAtRules) Tip: If you see an «Unknown at rule @import-normalize css(unknownAtRules)» warning in VSCode, change the css.lint.unknownAtRules setting to ignore
How to use normalize.css using npm install with webpack?
I am using webpack with ReactJS and trying to figure out how to using normalize.css after npm installing it (https://necolas.github.io/normalize.css/). Is the normalize.css applied right away after npm installing it? How would I make edits to it if I wanted to?
24.2k 14 14 gold badges 89 89 silver badges 110 110 bronze badges
asked Feb 8, 2017 at 17:33
2,143 4 4 gold badges 19 19 silver badges 19 19 bronze badges
5 Answers 5
You can use the npm-installed normalize.css in the following way with React:
import React from 'react'; import ReactDOM from 'react-dom'; import 'normalize.css'; // Note this const root = document.getElementById('root'); ReactDOM.render(Hello, World!
, root); The result will be:
Notice that the text has been styled by normalize.css .
To get it working, you need something similar to the following setup:
1) Add the Javascript from above to index.js
2) Add normalize.css (and friends) to package.json :
< "dependencies": < "normalize.css": "^5.0.0", "react": "^16.3.2", "react-dom": "^16.3.2" >, "devDependencies": < "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.11", "style-loader": "^0.21.0", "webpack-dev-server": "^3.1.4", "webpack": "^4.8.3" >> 3) Use the correct loaders in webpack.config.js :
module.exports = < mode: 'development', module: < rules: [ < test: /\.js$/, loader: 'babel-loader', options: < presets: ['env', 'react'] >>, < test: /\.css$/, use: [< loader: 'style-loader' >, < loader: 'css-loader' >] > ] > >; 4) Add an index.html file to see the results:
4) Install everything
npm install 5) Start the Webpack devserver:
./node_modules/.bin/webpack-dev-server --open NOTE: I am using version 5.0.0 of normalize.css . If you use version 6.0.0 or higher, the font will be different. All the opinionated rules were removed from normalize.css in that version.
Update 17/5/2018: Updated to use Webpack 4 and React 16.
answered Feb 15, 2017 at 9:50
1,770 1 1 gold badge 13 13 silver badges 21 21 bronze badges
I’m a React n00b, and found this via Google. As of today, the normalize docs show you the command line for ‘npm install’, but don’t explicitly mention what the importable package name is (it differs from the install name), or how to utilize it after. therefore, I am very grateful for this answer. =)
Jul 7, 2017 at 6:26
I had to use import ‘normalize-css/normalize.css’ , just importing ‘normalize.css would look for it in the current directory
Jul 25, 2017 at 18:46
@GreyVugrin normalize-css is not the same as normalize.css . normalize-css has not been updated since 2014: github.com/chrisdickinson/normalize-css
Aug 2, 2017 at 9:30
Adding: If you are using WebPack 4 and you cannot import normalize.less, try normalize.css.
@import "../node_modules/normalize.css/normalize.css"; module: < rules: [< test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader" ] >, < test: /\.less$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "less-loader" ] >] >; answered Sep 1, 2018 at 17:14
Timber Hjellum Timber Hjellum
330 2 2 silver badges 8 8 bronze badges
This import is from inside another css file of course.. e.g. style.css
Jul 16, 2019 at 19:56
this may also be helpful for folks to resolve issues where — when prev using style-loader — styles were inserted into the head after imported styles, thus overriding custom styles with the defaults
Jul 23, 2019 at 22:51
@import "~normalize.css/normalize.css"; 5,255 2 2 gold badges 23 23 silver badges 40 40 bronze badges
answered Dec 28, 2020 at 5:32
41 1 1 bronze badge
Once you import or require it will be included by Webpack unless you set it not to. For example:
module: < rules: [ // from 'loaders' to 'rules' < test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, >, < test: /\.sass$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract(< fallbackLoader: 'style-loader', loader: ['style-loader','sass-loader'] >) > ] > The exclude property will take care of that.
// public/assets/style.scss @import 'substyle1'; @import 'substyle1'; body
// src/index.js -> entry file import '../public/assets/style.scss'; // Webpack will know that you are importing your SCSS / SASS file Hope this helps.
29.4k 11 11 gold badges 96 96 silver badges 132 132 bronze badges
answered Feb 9, 2017 at 8:07
1,993 1 1 gold badge 15 15 silver badges 14 14 bronze badges
Sorry but could you clarify where I would do the import or require ? And how would I be able to edit the normalize sheet?
Feb 9, 2017 at 17:08
Normally what I do is import or require it on my entry point usually index.js . Then webpack will take care of the rest. If you want to edit normalize sheet then you can do so as you would in a very simple project (directly editing the file itself)
Feb 10, 2017 at 3:07
Or in this case, since it’s a node package, you can create a new style.css and import it in your entry file to make it available to all of your components.
Feb 10, 2017 at 3:09
Do you mind showing an example of how style.css should be created? Would that be the style sheet that holds all the styles? And I’m using SCSS by the way.
Feb 14, 2017 at 17:15
I updated my answer with a very simple example. It does not matter how you create your css / scss / sass file as long as you import it in your entry file, webpack will be the one to handle that. As long as a module is required or imported.
Feb 15, 2017 at 0:12
First, install or download normalize.css from GitHub.I would recommend download it.Then, There are then 2 main ways to make use of it.
Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.
Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.
i.e Just put these downloaded files into the project folder and add link to it by link tag
link rel=»stylesheet» type=»text/css» href=»normalize.css»
NOTE href content should point to the folder where normalize is stored.
normalize.css
Additional detail and explanation of the esoteric parts of normalize.css.
pre, code, kbd, samp
The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source.
Normally, using sub or sup affects the line-box height of text in all browsers. Source.
By default, Chrome on OS X and Safari on OS X allow very limited styling of select , unless a border property is set. The default font weight on optgroup elements cannot safely be changed in Chrome on OSX and Safari on OS X.
It is recommended that you do not style checkbox and radio inputs as Firefox’s implementation does not respect box-sizing, padding, or width.
Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default to text .
The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can’t control font , padding , border , or background . In Chrome and Safari on Windows you can’t control border properly. It will apply border-width but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying -webkit-appearance: textfield addresses these issues without removing the benefits of search inputs (e.g. showing past searches).
Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.