javascript-如何通过webpack使用npm install来使用normalize.css?

我正在将Webpack与ReactJS一起使用,并试图找出如何在npm安装它之后使用normalize.css([https://necolas.github.io/normalize.css/)。]

npm安装后是否立即应用了normalize.css? 如果需要,我将如何对其进行编辑?

预先谢谢您,一定会投票并接受答案

Dan Me asked 2020-07-20T10:21:49Z
4个解决方案
59 votes

您可以通过以下方式将npm安装的index.html与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);

结果将是:

Text styled by normalize.css

请注意,文本已通过index.html设置样式。

要使其正常工作,您需要与以下设置类似的内容:


1)从上方将Javascript添加到index.html

2)将index.html(和朋友)添加到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)在index.html中使用正确的装载机:

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

注意:我使用的是normalize.css的版本5.0.0。如果使用的版本是6.0.0或更高版本,则字体会有所不同。 该版本中从normalize.css中删除了所有已采纳的规则。


更新17/5/2018:更新为使用Webpack 4和React 16。

jumoel answered 2020-07-20T10:22:57Z
9 votes

添加:如果您使用的是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 answered 2020-07-20T10:23:22Z
-1 votes

一旦excluderequire包含在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 answered 2020-07-20T10:23:59Z
-7 votes

首先,从GitHub安装或下载normalize.css,我建议下载它,然后,有两种主要的使用方式。

方法1:将normalize.css用作您自己项目的基本CSS的起点,并自定义值以符合设计要求。

方法2:包括normalize.css并对其进行构建,如有必要,稍后在CSS中覆盖默认设置。

即只需将这些下载的文件放入项目文件夹并通过链接标签添加链接

链接rel =“ stylesheet” type =“ text / css” href =“ normalize.css”

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

er1shivam answered 2020-07-20T10:24:41Z
translate from https://stackoverflow.com:/questions/42119878/how-to-use-normalize-css-using-npm-install-with-webpack