使用 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 文件

-- -------------------- ---- -------
  ----- --------------- - -----------------------------
  ----- ---- - ----------------
  ----- -- - --------------

  ----- -------- - ----------------------- -------------------
  ----- ----------- - -------------------------------------

  ---------------------------- ----------------------- -- -
    ------------------------
  -- ------- -- -
    -------------------
  ---

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

webpack.config.js 配置如下：

-- -------------------- ---- -------
  -------------- - -
    ------- -
      ------ -
        -
          ----- ----------
          ---- -
            -
              ------- --------------
            --
            -
              ------- ------------
            --
            -
              ------- --------------
              -------- -
                ----------- -
                  ---------------- ------ -- ---- ------
                --
                ------------------ ----
              -
            -
          -
        -
      -
    -
  -

结语

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

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