Question

我正在使用带有ReactJS的webpack，并尝试在npm安装后使用normalize.css（https://necolas.github.io/normalize.css/）。

在安装npm之后是否立即应用normalize.css？如果我想，我将如何编辑？

提前感谢您，一定会投票并接受回答

Answer 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设置样式。

要使其正常工作，您需要类似于以下设置的内容：

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.

Answer 2

添加：如果您使用的是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"
            ]
        }
    ]
};

Answer 3

在 index.css 中：

@import "~normalize.css/normalize.css";

Answer 4

import或require后webpack将包含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。例如：

注意：我正在使用webpack 2

// 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

derbyClient.jar属性会处理这个问题。

示例：

derby.jar

希望这会有所帮助。

Answer 5

首先，从GitHub安装或下载normalize.css。我建议下载它。然后，有两种主要方法可以使用它。

方法1：使用normalize.css作为您自己项目基础CSS的起点，自定义值以符合设计要求。

方法2：包括不变的normalize.css并在其上构建，如果需要，稍后在CSS中覆盖默认值。

即将这些下载的文件放入项目文件夹并通过链接标记

添加链接

link rel =＆＃34; stylesheet＆＃34;类型=＆＃34;文本/ CSS＆＃34; HREF =＆＃34; normalize.css＆＃34;

注意href内容应指向存储规范化的文件夹。

如何在webpack中使用npm install使用normalize.css？

5 个答案: