从零搭一个极简版webpack+React工程（三）

前言

从零搭一个极简版 webpack+React 工程（二）

书接上文，作者的 study-webpack 工程已经可以使用 React 和 Typescript 了。前端不只是有 js 还有 css。本篇文章将讲述 webpack 如何处理 css

文件地址

GitHub 地址

支持 css

安装依赖包

npm i style-loader css-loader -D

复制代码

• css-loader:js 中导入了 css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出。³
• style-loader: 是通过一个 JS 脚本创建一个 style 标签，里面包含一些样式。style-loader 是不能单独使用的，应为它并不负责解析 css 之前的依赖关系，每个 loader 的功能都是单一的，各自拆分独立。³

修改 webpack.common.js

 module: {
    rules: [
      {
        // other
      },
      {
        test: /\.(css)$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
复制代码

修改 src/Home.jsx

import React from "react"

import "./Home.css"
type Props = {}

export default function Home({}: Props) {
  return <div className="box">我是typescript</div>
}
复制代码

因为 src/Home.jsx 引入了 Home.css，所以在根目录新建 Home.css 文件

新建 Home.css

.box {
  color: red;
}
复制代码

重新运行

npm start
复制代码

在浏览器中，你应该可以看到如下效果:

本部分代码地址:支持 css

支持 less、sass

在开发过程中，作者会用到一些 css 预编译工具比如 less、sass，如何让 webpack 支持 less、sass 呢？

安装依赖

npm i less less-loader sass sass-loader -D
复制代码

修改 webpack.common.js

 module: {
    rules: [
      {
        // other
      },
      {
       // other
      },
      {
        test: /\.(less)$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
复制代码

修改 src/Home.tsx

import React from "react"

import "./Home.css"
import "./style.less"
import "./style.scss"
type Props = {}

export default function Home({}: Props) {
  return <div className="box">我是typescript</div>
}
复制代码

在 src/Home.tsx 引入 style.less、style.scss 文件，所以需要新建这两个文件并编辑如下代码

新建 style.less

.box {
  background: blue;
}
复制代码

新建 style.scss

.box {
  border: 1px solid green;
}
复制代码

工程目录图

新建的文件位置如下图所示

重新执行

重新执行 npm start你应该可以在浏览器中看到如下效果

行文至此代码地址：支持 less、sass

PostCSS

不了解 PostCSS 可以点击我

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具

PostCSS 使用说明

安装依赖包

npm i postcss-loader autoprefixer -D
复制代码

修改 webpack.common.js

 module: {
    rules: [
      {
        // other
      },
      {
        test: /\.(css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
          },
        ],
      },
      {
        // other
      },

    ],
  },
复制代码

新增 postcss.config.js

postcss 生效需要使用一些配置，postcss-loader 会默认使用根目录下 postcss.config.js 文件

根目录新建 postcss.config.js 并编写如下代码：

module.exports = {
  plugins: [require("autoprefixer")],
}
复制代码

目录结构

修改 src/Home.css

.box {
  display: flex;
  color: red;
  justify-content: center;
}
复制代码

修改 package.json

  "dependencies": {
   // other
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9",
    "not op_mini all"
  ]
复制代码

重新运行

在浏览器控制台可以看到如下图所示，postcss 生效了

结语

本篇极简，只讲述如何使用这些依赖包，并不详细描述为什么这么使用，所使用的依赖包具体作用是什么。但是文中有许多引用链接，读者如有兴趣可自行查阅。

作者水品有限，阐述或者讲解有误欢迎评论区留言指教，感谢之至

参考文献

1.style-loader

2.css-loader 和 style-loader 关系原理及作用

3.css-loader 和 style-loader 的区别和使用

4.less-loader