Javascript 如何使用带有 webpack 的 npm install 来使用 normalize.css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42119878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use normalize.css using npm install with webpack?
提问by Dan Me
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/).
我正在将 webpack 与 ReactJS 一起使用，并试图弄清楚在 npm 安装它之后如何使用 normalize.css ( 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?
安装 npm 后是否立即应用 normalize.css？如果我愿意，我将如何对其进行编辑？
Thank you in advance and will be sure to vote up and accept answer
预先感谢您，并一定会投票并接受答案
回答by jumoel
You can use the npm-installed normalize.cssin the following way with React:
你可以通过normalize.css以下方式在 React 中使用 npm-installed ：
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.
请注意，文本的样式由normalize.css.
To get it working, you need something similar to the following setup:
要使其正常工作，您需要类似于以下设置的内容：
1) Add the Javascript from above to index.js
1）从上面添加Javascript到 index.js
2) Add normalize.css(and friends) to package.json:
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) Use the correct loaders in webpack.config.js:
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) Add an index.htmlfile to see the results:
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) Install everything
4）安装一切
npm install
5) Start the Webpack devserver:
5) 启动 Webpack 开发服务器：
./node_modules/.bin/webpack-dev-server --open
NOTE:I am using version 5.0.0of normalize.css. If you use version 6.0.0or higher, the font will be different. All the opinionated rules were removed from normalize.cssin that version.
注：我使用的版本5.0.0的normalize.css。如果您使用版本6.0.0或更高版本，字体会有所不同。normalize.css该版本中删除了所有自以为是的规则。
Update 17/5/2018:Updated to use Webpack 4 and React 16.
2018 年 5 月 17 日更新：更新为使用 Webpack 4 和 React 16。
回答by Timber Hjellum
Adding: If you are using WebPack 4 and you cannot import normalize.less, try normalize.css.
添加：如果您使用的是 WebPack 4 并且无法导入 normalize.less，请尝试 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"
]
}
]
};
回答by ickyrr
Once you importor requireit will be included by Webpack unless you set it not to. For example:
一旦你import或require它将被 Webpack 包含，除非你将其设置为不包含。例如：
Note: I'm using Webpack 2.
注意：我使用的是 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 excludeproperty will take care of that.
该exclude物业将采取照顾。
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.
希望这可以帮助。
回答by er1shivam
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.
首先，从GitHub安装或下载normalize.css。我建议下载它。然后，有两种主要方法可以使用它。
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.
方法 1：使用 normalize.css 作为您自己项目的基本 CSS 的起点，自定义值以匹配设计要求。
Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.
方法 2：包括 normalize.css 原样并在其基础上构建，如有必要，稍后在 CSS 中覆盖默认值。
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"
链接 rel="stylesheet" type="text/css" href="normalize.css"
NOTE href content should point to the folder where normalize is stored.
注意 href 内容应指向存储 normalize 的文件夹。
