【发布时间】：2017-06-26 11:16:26
【问题描述】：
我正在使用带有 ReactJS 的 webpack，并试图弄清楚在 npm 安装之后如何使用 normalize.css (https://necolas.github.io/normalize.css/)。
Normalize.css 是否在 npm 安装后立即应用？如果我愿意，我将如何对其进行编辑？
提前谢谢你，一定会投票并接受答案
【问题讨论】：
标签： javascript html css npm webpack
【发布时间】：2017-06-26 11:16:26
【问题描述】：
首先，从 GitHub 安装或下载 normalize.css。我建议下载它。然后，有两种主要的使用方法。
方法 1：使用 normalize.css 作为您自己项目的基础 CSS 的起点，自定义值以匹配设计要求。
方法 2：包含 normalize.css 并在其上构建，如有必要，稍后在 CSS 中覆盖默认值。
即只需将这些下载的文件放入项目文件夹并通过链接标签添加链接
link rel="stylesheet" type="text/css" href="normalize.css"
注意 href 内容应指向存储 normalize 的文件夹。
【讨论】：
-
相信我的问题仍然存在。如果我 npm 安装它会怎样？
一旦你 import 或 require 它将被 Webpack 包含，除非你将其设置为不包含。例如：
注意：我使用的是 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']
})
}
]
}
exclude 属性会解决这个问题。
例子：
// 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
希望这会有所帮助。
【讨论】：
-
抱歉，您能否说明我将在哪里使用
import或require？我怎样才能编辑规范化表？ -
通常我所做的是
import或require在我的入口点通常index.js。然后 webpack 会处理剩下的事情。如果您想编辑normalize表，那么您可以像在一个非常简单的项目中那样（直接编辑文件本身） -
或者在这种情况下，由于它是一个节点包，您可以创建一个新的
style.css并将其导入到您的入口文件中，以使其可用于您的所有组件。 -
您介意展示一个应该如何创建 style.css 的示例吗？那会是包含所有样式的样式表吗？顺便说一句，我正在使用 SCSS。
-
我用一个非常简单的例子更新了我的答案。不管你如何创建你的 css / scss / sass 文件，只要你将它导入到你的入口文件中，webpack 将是处理它的那个。只要需要或导入一个模块。
您可以通过以下方式将 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) 将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
注意：我使用的是5.0.0 的normalize.css 版本。如果您使用6.0.0 或更高版本，字体会有所不同。在该版本中，所有自以为是的规则都已从 normalize.css 中删除。
2018 年 5 月 17 日更新：更新为使用 Webpack 4 和 React 16。
【讨论】：
-
我是 React n00b，通过 Google 找到了这个。截至今天，规范化文档向您展示了“npm install”的命令行，但没有明确提及可导入的包名称是什么（它与安装名称不同），或者之后如何使用它......因此，我非常感谢这个答案。 =)
-
我必须使用
import 'normalize-css/normalize.css'，只需导入'normalize.css 就会在当前目录中查找它 -
@GreyVugrin
normalize-css与normalize.css不同。normalize-css自 2014 年以来未更新：github.com/chrisdickinson/normalize-css
添加：如果您使用的是 WebPack 4，并且无法导入 normalize.less，请尝试 normalize.css。
@import "../node_modules/normalize.css/normalize.css";
还有我的规则：
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"less-loader"
]
}
]
};
【讨论】：
-
这个导入当然是从另一个 css 文件中进行的。例如样式.css
-
这也可能有助于人们解决以下问题 - 当 prev 使用 style-loader 时 - 在导入样式后将样式插入头部，从而用默认值覆盖自定义样式
在 index.css 中：
@import "~normalize.css/normalize.css";
【讨论】：