问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用带有 webpack 的 npm install 来使用 normalize.css？

社区维基
1
新手上路，请多包涵

我将 webpack 与 ReactJS 一起使用，并试图弄清楚如何在 npm 安装后使用 normalize.css ( https://necolas.github.io/normalize.css/ )。

npm 安装后 normalize.css 是否立即应用？如果我愿意，我将如何对其进行编辑？

原文由 Dan Me 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcssnpmwebpack
阅读 632
1 个回答
得票最新
社区维基
1

您可以通过以下方式将 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 样式化的文本

请注意，文本的样式已设置为 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"
    }
}
  1. 在 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
  1. 启动 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。

原文由 jumoel 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题