How to use normalize.css using npm install with webpack?

后端未结

关注

 5  1392

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

相关标签:

5条回答

孤独总比滥情好

2021-02-03 17:28

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(<h1>Hello, World!</h1>, 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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="root"></div>
  <script src="main.js"></script>
</body>
</html>

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.

0 讨论(0)

傲寒

2021-02-03 17:34

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
旧巷少年郎

2021-02-03 17:37
in index.css:
```
@import "~normalize.css/normalize.css";
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

渐次进展

2021-02-03 17:42

Once you import or require it will be included by Webpack unless you set it not to. For example:

Note: I’m using Webpack 2.

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.

Example:

// public/assets/style.scss
@import 'substyle1';
@import 'substyle1';

body {
  background-color: red;
}

// src/index.js -> entry file
import '../public/assets/style.scss';
// Webpack will know that you are importing your SCSS / SASS file

Hope this helps.

0 讨论(0)

一向

2021-02-03 17:48

Adding: If you are using WebPack 4 and you cannot import normalize.less, try normalize.css.

@import "../node_modules/normalize.css/normalize.css";

And my rules:

module: {
    rules: [{
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader,
                "css-loader"
            ]
        },
        {
            test: /\.less$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "less-loader"
            ]
        }
    ]
};

0 讨论(0)