您可以使用 npm 安装的normalize.css使用 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);
结果将是：
请注意，文本的样式是normalize.css.
要使其正常工作，您需要类似于以下设置的内容：
1）将上面的Javascript添加到index.js
2) Add normalize.css（和朋友）到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）使用正确的装载机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）添加一个index.html文件查看结果：
<!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）安装一切
npm install
5）启动Webpack开发服务器：
./node_modules/.bin/webpack-dev-server --open
NOTE:我正在使用版本5.0.0 of normalize.css。如果您使用版本6.0.0或更高，字体会有所不同。所有固执己见的规则都被删除了normalize.css在那个版本中。
2018 年 5 月 17 日更新：更新为使用 Webpack 4 和 React 16。
