如何将npm install与webpack一起使用normalize.css？ [英] How to use normalize.css using npm install with webpack?
问题描述
我正在将Webpack与ReactJS一起使用，并试图弄清npm安装后如何使用normalize.css（
设置样式的文本请注意，文本已由 normalize.css 。
要使其正常运行，您需要进行以下设置：
1）从上方将Javascript添加到 index.js
2）添加 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 = {
模式：开发，
模块：{
规则：[
{
测试：/\.js $ /，
loader：'babel-loader'，
选项：{{预设：['env'，'react']}
}，
{
测试：/\.css $ /，
使用：[{loader：' style-loader'}，{loader：'css-loader'}]
}
]
}
};
4）添加 index.html 文件查看结果：
<！DOCTYPE html>
< html lang = zh-CN>
< 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
注意：我正在使用版本 5.0.0 normalize.css 中的$ c>。如果使用版本 6.0.0 或更高版本，则字体会有所不同。在该版本中，所有自以为是的规则都从 normalize.css 中删除。
更新17/5/2018：已更新为使用Webpack 4和React 16。
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?
Thank you in advance and will be sure to vote up and accept answer
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.
这篇关于如何将npm install与webpack一起使用normalize.css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
