问题描述
我正在将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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!