使用 less-with-include 进行 less 文件的处理

在前端开发工作中，我们经常需要针对 less 文件进行处理，这里介绍一款方便的 npm 包 less-with-include。

less-with-include 是什么

less-with-include 是 less 文件的编译工具，该工具主要解决 less import 时路径问题。

当我们在使用 less 时，经常会用到 @import 命令来引入其他的 less 文件。但是，当被引入的 less 文件中也有引入其他 less 文件时，路径引用就会出现问题。为了解决这个问题，就有了 less-with-include 这个 npm 包。

less-with-include 可以自动解析 less 文件中的 import 语句，并将引用路径转换为格式正确的绝对路径，避免了路径引用的错误。

less-with-include 的使用

安装 less-with-include

  npm install less-with-include

使用 less-with-include 编译 less 文件

// www.javascriptcn.com code example
  const lessWithInclude = require('less-with-include');
  const path = require('path');
  const fs = require('fs');

  const lessPath = path.resolve(__dirname, 'css/styles.less');
  const lessContent = fs.readFileSync(lessPath).toString();

  lessWithInclude(lessContent, lessPath).then((output) => {
    console.log(output.css);
  }, (error) => {
    console.log(error);
  });

以上是一个简单的 less 文件编译示例，实际项目中，我们常常会在 webpack 中使用 less-loader。

webpack.config.js 配置如下：

// www.javascriptcn.com code example
  module.exports = {
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader'
            },
            {
              loader: 'less-loader',
              options: {
                modifyVars: {
                  'primary-color': '#f00' // antd 主题配置示例
                },
                javascriptEnabled: true
              }
            }
          ]
        }
      ]
    }
  }

结语

less-with-include 提供了解决 less 文件 import 引用路径问题的方案，能够在项目开发中提高代码编写效率，推荐大家加入到日常的项目工作中。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/60055ea481e8991b448dc05d