首页 > 其他分享> 文章详细

Less

2021-10-30 22:32:45 阅读：145 来源： 互联网

标签：less Less loader webpack css js CSS

什么是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
 
}

标签：less,Less,loader,webpack,css,js,CSS
来源： https://www.cnblogs.com/keyeking/p/15487504.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Less