在 webpack 中使用 less

分析 less-loader

分析: webpack 打包的时候只认识 js,我们之前处理 css 的时候就依赖了 css-loader 和 style-loader。 那么，我们想要让 webpack 打包 less 的时候，自然需要一个 loader 来转换代码,它就是 less-loader

/*
webpack只认识js
less        ==>         css         ==>         js  ==>应用到页面
less-loader             css-loader              style-loader
*/

使用

安装

pnpm i less less-loader -D

引入

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  //
  devServer: {
    open: true,
  },
  //
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.less$/,
        //先让less-loader解析less，然后让css转换，最后添加在页面
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  // plugins
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

最后执行 npx wenpack 就可以解析 less 了

less 与其它解决变量的方案连用

目前我们学习了以下几个解决方案：

1. BEM
2. Css Moudule
3. css in js
4. less

less 可以与 1 2 连用，我们看最佳实践代码。

最佳实践

src/assets/index.less

//[src/assets/index.less]
@color: red;

.main {
  color: @color;
  font-size: 26px;
}

// 与BEM连用,只需要正常书写BEM规范即可
.main-nav {
  background-color: skyblue;
}

src/index.js

//[src/index.js]

//与css module连用,css-loader内部实现了css-module,只需要配置的时候打开选项即可,style-loader又进一步对css-loader导出的代码做了简化处理，直接导入less文件使用就可以了
const lessStyle = require("./assets/index.less");
console.log("我是入口", lessStyle);
// 使用
const app = document.querySelector("#app");
app.classList.add(lessStyle.main);

webpack.config.js

//[webpack.config.js]

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  //
  devServer: {
    open: true,
  },
  //
  module: {
    rules: [
      // 处理css
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      //处理less，并打开css-module,先让less-loader解析less
      //然后让css-loader转换，最后style-loader添加在页面
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader?modules", "less-loader"],
      },
    ],
  },
  // plugins
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};