npm 包 less-json-import-loader 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端开发中，经常会使用到 Less 来进行样式开发，而很多时候我们需要使用变量来辅助样式开发，比如配置颜色变量、间距变量等。而这些变量值通常需要从后端 API 中获取，这个时候我们就需要使用到 less-json-import-loader 这个 npm 包。

less-json-import-loader 可以让我们在 Less 中以 JSON 格式引入数据，从而方便我们使用这些变量值。

本文就来介绍如何使用 less-json-import-loader 来进行前端样式开发。

安装

安装依赖：

npm install less-json-import-loader

配置

在 webpack 中进行配置，引入 less-json-import-loader：

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

在使用 less-loader 之前先使用 less-json-import-loader 来引入数据，其中 jsonPath 表示 JSON 数据的路径。

使用

使用 @import 引入 JSON 数据：

@import "variables.json";

body {
  background-color: @primary-color;
  color: @text-color;
}

在 JSON 文件中定义变量：

{
  "primary-color": "#1890FF",
  "text-color": "#333333"
}

示例代码

variables.json:

{
  "primary-color": "#1890FF",
  "text-color": "#333333"
}

index.less:

@import "variables.json";

body {
  background-color: @primary-color;
  color: @text-color;
}

结语

在前端开发中，使用 less-json-import-loader 可以极大的便利我们进行样式开发，方便使用变量。本文已经详细讲解了如何使用和配置，希望对读者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005607881e8991b448dea3d