Less简介

什么是CSS的预处理器？

CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题。

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言

CSS的预处理器最大的好处就是，即便你不会写预处理器（less、sass等等）方式的代码，写普通的css代码也是可以的

Less文档：https://less.bootcss.com/

结合webpack来进行less，通过webpack来配置less，因为再使用webpack打包的时候，可以将写好的less编译成css代码样式

webpack.config.js：

const {resolve}=require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin")
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
module.exports={
  //入口文件
  entry:"./src/index.js",
  //出口文件
  output:{
      // 出口文件
      filename: "[name].js",
      // 出口路径
      path: resolve(__dirname, "build"),
  
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          // 识别css-laoder的js字符串为样式代码，添加到head标签
          MiniCssExtractPlugin.loader,
          // css-loader是将样式的代码翻译为js的模式，内部是样式的字符串
          'css-loader',
          // less-loader的作用是将less文件变为css文件
          'less-loader'
        ]
      }

    ]
  },
    // 插件
    plugins: [
      // html文件
      new HtmlWebpackPlugin({
        // 模板路径
        template: "./src/index.html",
      }),
      new MiniCssExtractPlugin({
        // 输出路径
        filename: 'index.css'
      })
    ],
   //打包模式-默认不写是生产模式
   mode: 'development',
   watch: true
 
}