如何使用npm install和webpack来使用normalize.css？

Question

如何使用npm install和webpack来使用normalize.css？

javascripthtmlcssnpmwebpack

71

我正在使用webpack和ReactJS，并尝试弄清楚如何在npm安装normalize.css（https://necolas.github.io/normalize.css/）之后使用它。

在npm安装后，normalize.css是否立即应用？如果我想编辑它，该怎么办？

- Dan Me

5个回答

12

添加: 如果你正在使用 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"
            ]
        }
    ]
};

- Timber Hjellum

2

这个导入是来自另一个CSS文件内部的.. 例如style.css - Sam Murphy

2

这可能对解决问题有所帮助，其中--当以前使用style-loader时--样式被插入到导入的样式之后，从而用默认值覆盖自定义样式。 - aimlessWonderer

5

在 index.css 文件中：

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

- S. Max

-1

一旦你使用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

希望这能有所帮助。

- ickyrr

1

抱歉，您能澄清一下我应该在哪里进行“import”或“require”吗？我如何能够编辑规范化表格？ - Dan Me

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - ickyrr

在这种情况下，由于它是一个节点包，您可以创建一个新的 style.css 并在入口文件中导入它，以使其对所有组件都可用。 - ickyrr

你介意展示一下 style.css 应该如何创建的示例吗？那是包含所有样式的样式表吗？顺便说一下，我正在使用 SCSS。 - Dan Me

我更新了我的答案，并提供了一个非常简单的示例。只要您在入口文件中导入CSS / SCSS / SASS文件，无论您如何创建它，webpack都将处理它。只要需要或导入模块即可。 - ickyrr

-7

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

方法1：将normalize.css作为项目基础CSS的起点，并根据设计要求自定义值。

方法2：包含未经修改的normalize.css并在其上构建，必要时在CSS中覆盖默认值。

即将这些下载的文件放入项目文件夹中，并通过链接标签添加链接到它。

引用：注意：href内容应指向存储normalize的文件夹。

- er1shivam

1

相信我的问题仍然存在。如果我使用npm安装它会怎样？ - Dan Me

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jumoel · Accepted Answer

你可以在React中使用通过npm安装的normalize.css，方法如下：

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。