vue3+ts学习（六）：webpack-css相关loader的使用

解析css、less文件，需要下载css-loader和less文件，解析完之后需要借用style-loader插入html中

npm install css-loader -D

npm install less-loader -D

npm install style-loader -D

然后在webpack配置中增加匹配规则就可以解析使用了

module.exports = {
  /*
     之前配置出入口文件的内容
  */
  module:{
    rules:[
      {
        //以.css结尾的匹配这个规则， .在正则有特殊含义 需要加\前缀,$是以什么结尾的意思
        test: /\.css$/,
        // loader: "css-loader"
        // 上面是下面的语法题，但只能匹配一个loader
        use: [
        // 要先执行css-loader再执行style-loader,加载顺序是从后往前执行的
          "style-loader",
        // {loader:"css-loader",config:{}},的缩写
          "css-loader",
        ]
      },
      {
        test: /.\less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }
    ]
  }
}

此时还需要一个postcss的loader,作用是添加css浏览器前缀，转换最新的css为大多数浏览器可识别的样式，该loader依赖一个叫postcss-preset-env的插件，使用如下：

先下载

npm install postcss-loader -D

npm install postcss-preset-env -D

----webpack.config.js----
use:[
          "style-loader",
          "css-loader",  
          "postcss-loader", //比css先使用
          // 可以通过新建一个在根目录的postcss.config.js将下列配置抽离出去，当postcss找不到对应配置项时就会自动从该文件查找
          // {   
          //   loader:"postcss-loader",
          //   option:{
          //     postcssOptions:{
          //       plugins:[
          //         require("postcss-preset-env")
          //       ]
          //     }
          //   }
          // }
          
        ]
----postcss.config.js----
module.exports = {
  plugins:[
    require("postcss-preset-env")
  ]
}

此时打包后的转换结果：