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

Posted

技术标签:

【中文标题】如何使用带有 webpack 的 npm install 来使用 normalize.css?【英文标题】:How to use normalize.css using npm install with webpack? 【发布时间】:2017-06-26 11:16:26 【问题描述】:

我正在使用带有 ReactJS 的 webpack,并试图弄清楚在 npm 安装之后如何使用 normalize.css (https://necolas.github.io/normalize.css/)。

Normalize.css 是否在 npm 安装后立即应用?如果我愿意,我将如何对其进行编辑?

提前谢谢你,一定会投票并接受答案

【问题讨论】:

【参考方案1】:

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

方法 1:使用 normalize.css 作为您自己项目的基础 CSS 的起点,自定义值以匹配设计要求。

方法 2:包含 normalize.css 并在其上构建,如有必要,稍后在 CSS 中覆盖默认值。

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

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

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

【讨论】:

相信我的问题仍然存在。如果我 npm 安装它会怎样?【参考方案2】:

一旦你 importrequire 它将被 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

希望这会有所帮助。

【讨论】:

抱歉,您能否说明我将在哪里使用importrequire?我怎样才能编辑规范化表? 通常我所做的是importrequire 在我的入口点通常index.js。然后 webpack 会处理剩下的事情。如果您想编辑normalize 表,那么您可以像在一个非常简单的项目中那样(直接编辑文件本身) 或者在这种情况下,由于它是一个节点包,您可以创建一个新的style.css 并将其导入到您的入口文件中,以使其可用于您的所有组件。 您介意展示一个应该如何创建 style.css 的示例吗?那会是包含所有样式的样式表吗?顺便说一句,我正在使用 SCSS。 我用一个非常简单的例子更新了我的答案。不管你如何创建你的 css / scss / sass 文件,只要你将它导入到你的入口文件中,webpack 将是处理它的那个。只要需要或导入一个模块。【参考方案3】:

您可以通过以下方式将 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 开发服务器:

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

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


2018 年 5 月 17 日更新:更新为使用 Webpack 4 和 React 16。

【讨论】:

我是 React n00b,通过 Google 找到了这个。截至今天,规范化文档向您展示了“npm install”的命令行,但没有明确提及可导入的包名称是什么(它与安装名称不同),或者之后如何使用它......因此,我非常感谢这个答案。 =) 我必须使用import 'normalize-css/normalize.css',只需导入'normalize.css 就会在当前目录中查找它 @GreyVugrin normalize-cssnormalize.css 不同。 normalize-css 自 2014 年以来未更新:github.com/chrisdickinson/normalize-css【参考方案4】:

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

【讨论】:

这个导入当然是从另一个 css 文件中进行的。例如样式.css 这也可能有助于人们解决以下问题 - 当 prev 使用 style-loader 时 - 在导入样式后将样式插入头部,从而用默认值覆盖自定义样式【参考方案5】:

在 index.css 中:

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

【讨论】:

以上是关于如何使用带有 webpack 的 npm install 来使用 normalize.css?的主要内容,如果未能解决你的问题,请参考以下文章

Django 如何使用带有静态/模板的 npm 模块

将 Bootstrap 主题(带有自定义 CSS 和 JS 插件)与带有 Webpacker 和 Yarn/NPM 的 Rails 6 集成

如何使用 npm/webpack 正确导入 Gridstack?

如何使用npm安装webpack

如何在 NPM 包中使用 webpack 动态导入?

AWS Elastic Beanstalk - 如何使用 npm 和 webpack 构建捆绑 JS