如何使用规范化。使用npm与webpack安装css ?

I am using webpack with ReactJS and trying to figure out how to using normalize.css after npm installing it (https://necolas.github.io/normalize.css/).

我使用的webpack中包含了反应物，并试图找出如何使用normalize。npm安装后的css (https://necolas.github.io/normalize.css/)。

Is the normalize.css applied right away after npm installing it? How would I make edits to it if I wanted to?

是正常的。css在npm安装后立即应用?如果我想编辑的话，我该怎么做呢?

Thank you in advance and will be sure to vote up and accept answer

事先谢谢你，一定会投票接受你的回答

3 个解决方案

#1

You can use the npm-installed normalize.css in the following way with React:

您可以使用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);

The result will be:

结果将是:

Notice that the text has been styled by normalize.css.

注意，文本已经被normalizy .css样式化了。

To get it working, you need something similar to the following setup:

要使它工作，您需要类似以下设置:

1) Add the Javascript from above to index.js

1)将上面的Javascript添加到index.js中

2) Add normalize.css (and friends) to package.json:

2)添加正常化。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) Use the correct loaders in webpack.config.js:

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) Add an index.html file to see the results:

4)添加一个索引。查看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) Install everything

4)安装的一切

npm install

5) Start the Webpack devserver:

5)启动Webpack devserver:

./node_modules/.bin/webpack-dev-server --open

NOTE: I am using version 5.0.0 of normalize.css. If you use version 6.0.0 or higher, the font will be different. All the opinionated rules were removed from normalize.css in that version.

注意:我使用的是normalize.css的5.0.0版本。如果您使用版本6.0.0或更高版本，字体将不同。所有固执己见的规则都从规范化中删除了。css版本。

Update 17/5/2018: Updated to use Webpack 4 and React 16.

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

#2

-1

Once you import or require it will be included by webpack unless you set it not to. For example:

一旦你导入或要求它将被包括在webpack，除非你设置它不。例如:

Note: Im using webpack 2

注意:我正在使用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']
            })
        }
    ]
}

the exclude property will take care of that.

排除属性会处理这个。

Example:

例子:

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

hope this helps.

希望这个有帮助。

#3

-4

First, install or download normalize.css from GitHub.I would recommend download it.Then, There are then 2 main ways to make use of it.

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

Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.

方法1:使用规范化。css作为您自己项目的基本css的起点，定制值以匹配设计的需求。

Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.

方法2:包括正常化。css未被修改并建立在它的基础上，如果有必要的话，重写css中的默认值。

i.e Just put these downloaded files into the project folder and add link to it by link tag

我。e将下载的文件放入项目文件夹中，并通过链接标签添加链接

link rel="stylesheet" type="text/css" href="normalize.css"

链接rel = "样式表" type = " text / css " href = " normalize.css "

NOTE href content should point to the folder where normalize is stored.

注意，href内容应该指向存储normalize的文件夹。

#1