如何在webpack中使用npm install使用normalize.css？
Dan*_* Me 45 html javascript css npm webpack
我正在使用带有ReactJS的webpack,并试图在安装它之后弄清楚如何使用normalize.css(https://necolas.github.io/normalize.css/).
是否在npm安装后立即应用normalize.css？如果我想,我将如何编辑？
提前谢谢你,一定要投票并接受答复
jum*_*oel 61
您可以使用normalize.css以下方式使用Npm安装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 devserver:
./node_modules/.bin/webpack-dev-server --open
注:我使用的版本5.0.0的normalize.css.如果使用版本6.0.0或更高版本,则字体将不同.所有见解的规则都从normalize.css该版本中删除.
更新17/5/2018:更新为使用Webpack 4和React 16.
- 我是 React n00b，通过谷歌找到了这个。截至今天，规范化文档向您展示了“npm install”的命令行，但没有明确提及可导入的包名称是什么（它与安装名称不同），或者之后如何使用它......因此，我非常感谢这个答案。=) (3认同)
小智 9
添加：如果您使用的是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 文件。例如 style.css (2认同)
- 这也可能有助于人们解决以下问题：当使用样式加载器之前时，样式在导入样式之后插入到头部，从而使用默认样式覆盖自定义样式 (2认同)
小智 -7
首先，安装或从 GitHub 下载 normalize.css。我建议下载它。然后，有两种主要方法来使用它。
\n\n方法 1：使用 normalize.css 作为您自己的项目\xe2\x80\x99s 基本 CSS 的起点，自定义值以匹配设计\xe2\x80\x99s 要求。
\n\n方法 2：不加改动地包含 normalize.css 并在其基础上构建，如有必要，稍后覆盖 CSS 中的默认值。
\n\n即只需将这些下载的文件放入项目文件夹中并通过链接标记添加链接即可
\n\n\n\n\n链接 rel="stylesheet" type="text/css" href="normalize.css"
\n
注意 href 内容应指向存储标准化的文件夹。
\n| 归档时间： |
|
| 查看次数： |
38869 次 |
| 最近记录： |