（六）处理css和less文件

步骤六

基础功能配置-处理css和less文件

1. webpack5从零搭建完整的react18+ts开发和打包环境

h2 {
    color: red;
    transform: translateY(100px);
}

2. 在src/App.tsx中引入app.css

import React from 'react'
import './app.css'

function App() {
  return <h2>webpack5-rea11ct-ts</h2>
}
export default App

执行打包命令npm run build:dev,会发现有报错, 因为webpack默认只认识js,是不识别css文件的,需要使用loader来解析css,

3. 安装依赖

npm i style-loader css-loader -D

• style-loader: 把解析后的css代码从js中抽离,放到头部的style标签中(在运行时做的)
• css-loader: 解析css文件代码

4. 因为解析css的配置开发和打包环境都会用到,所以加在公共配置webpack.base.js中

// webpack.base.js
// ...
module.exports = {
  // ...
  module: { 
    rules: [
      // ...
      {
        test: /.css$/, //匹配 css 文件
        use: ['style-loader','css-loader']
      }
    ]
  },
  // ...
}

上面提到过, loader执行顺序是从右往左,从下往上的,匹配到css文件后先用css-loader解析css, 最后借助style-loader把css插入到头部style标签中。

5. 配置完成后再npm run build:dev打包,借助serve -s dist启动后在浏览器查看,可以看到样式生效了。