《 使用 Webpack 加载 CSS + 使用 Normalize.css 实现跨浏览器的默认样式标准化》
发布于 3 年前 作者 HugoJing 6160 次浏览 来自 分享

小教程第三课。原文地址:https://github.com/hugojing/web-lessons/tree/master/lesson3

因为很多人要求讲 Webpack ,索性给原定的只讲 【Normalize.css】 再额外加个 【使用 Webpack 加载 CSS】。

让我们愉快的在 JS 中 import CSS 吧:

import 'normalize.css'
import './style.css'

正文如下:

《 使用 Webpack 加载 CSS + 使用 Normalize.css 实现跨浏览器的默认样式标准化》

目标

复制 lesson2 项目为 lesson3 项目,在其中修改代码。

在 JS 中引入 CSS 模块,最终打包输出为一个 JS 和 一个 CSS 文件。

当在浏览器中访问 http://localhost:8080 时,输出一个页面,在其中点击按钮、随机派出一只小精灵。

该页面需应用 Normalize.css 样式。

知识点

  1. 学习使用 Normalize.css
  2. 学习 Webpack 的 CSS 模块加载与打包

课程内容

为什么使用 Normalize.css

可能你注意到了,上一节课我们编写的 CSS 代码中,有这样一条:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

为什么要设置 body 的 margin 为 0 ?

你可以在 Chrome 中浏览上一节课完成的网页,打开 开发者工具 > Elements 查看 body 元素的样式:

body {   /* user agent stylesheet */
    display: block;
    margin: 8px;
}

这就是浏览器的自带样式表。

而且不同浏览器的自带样式还不尽相同,这就需要一个规范化的默认样式表,实现跨浏览器的默认样式保持一致。

如何使用 Normalize.css

Normalize.css 是一个很小的 CSS 样式表文件。

所以使用起来也很简单,只需引入即可生效。

比如:

1.简单的在 dist/index.html 中用 <link> 标签的加载能力引入 CSS 文件:

  <head>
    <title>ES2015 宠物小精灵</title>
    <link rel="stylesheet" href="./normalize.css">
    <link rel="stylesheet" href="./style.css">
  </head>

这样当然可行,但是 normalize.css 与 style.css 两文件都很小,可以考虑打包为一个 CSS 文件,以节省一个网络请求。

推荐下面这个:

2.使用 Webpack 的 CSS 模块加载能力

上节课说过,Webpack 是一个前端模块加载器 + 打包工具。这里用的就是它前端模块加载功能之一 —— CSS 模块加载。

首先需要增加 Webpack 配置信息:

安装所需要的 loaders:

$ npm i css-loader style-loader --save-dev

修改 webpack.config.js文件,对 CSS 模块使用 style-loader 和 css-loader 来加载:

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel',
            include: [SRC_PATH]
        },
        {
            test: /\.css$/,
            loader: 'style!css'
        }
    ]
},
// ...

剪切 dist/style.csssrc/style.css,去掉 margin: 0 这一行:

html, body {
    width: 100%;
    height: 100%;
    /*margin: 0;*/
}

通过 npm 安装 Normalize.css:

$ npm i normalize.css --save

修改 src/main.js 文件,增加 CSS 文件的引入:

import 'normalize.css'
import './style.css'
import pokemonGif from 'pokemon-gif'
// ...

当然也要适时修改 dist/index.html,注释掉一行:

<head>
  <title>ES2015 宠物小精灵</title>
  <!-- <link rel="stylesheet" href="./style.css"> -->
</head>

使用 npm run build 命令进行打包,然后使用 npm run serve 启动服务。

查看页面即可发现 body 的 margin 已经为 0,说明 Normalize.css 生效。

不过,咱们的两个 CSS 文件都已经打包到 JS 文件中去了,稍稍观察即可发现:

竟然是由 JS 动态地创建 <style> 标签来加载的,而且还是两个 <style> 标签!

网络请求次数虽然少了,但又带来了多个 <style> 标签,所以需要改善一下。

多个 CSS 文件合并为一个,并输出为独立的 CSS 文件

首先安装插件:

$ npm i extract-text-webpack-plugin --save-dev

修改 webpack.config.js 文件,对 CSS 模块增加插件:

// ...
const ExtractTextPlugin = require("extract-text-webpack-plugin")
// ...

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel',
            include: [SRC_PATH]
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css')
        }
    ]
},

// ...

plugins: [
    new ExtractTextPlugin("styles.css"),
    // ...
]

这样,就能把 CSS 模块单独提取出来,打成一个单独的文件 dist/styles.css

快去 dist/index.html 中引入该文件:

<head>
  <title>ES2015 宠物小精灵</title>
  <link rel="stylesheet" href="./styles.css">
</head>

打包,启动服务。

查看页面,终于达到了满意的效果:

把 Normalize.css 与自己写的样式文件打包到一块了,节省了不必要的静态资源网络请求次数,又避免走向另一个极端比如“ CSS 打进 JS,JS 为每一个样式表创建一个 <style> 标签” 这样的奇葩做法。

最后说一句:上一节课很多人反映要系统讲一下 Webpack,我觉得没有太大的必要,尤其对于萌新而言。只能看到冰山一角并不是坏事,随着视野的打开慢慢学到 Webpack 的各个部分,比一口吃个大胖子要好。当然,部分人确实有能力,那我推荐直接看:《一小时包教会 —— webpack 入门指南》

2 回复

赞! 自豪地采用 CNodeJS ionic

@heanxu 捧场王 😝

回到顶部