26

是否可以像使用 Stylus 一样将变量从 JSON 文件加载到 LESS CSS 预处理器中？

带有文件内容myvars.json

{
    "color1": "#112345",
    "color2": "#667890"
}

在手写笔中，我...

json('myvars.json')
body{ background-color: color1; }

可以在LESS中做到这一点吗？

我想将文件保留为 JSON，以便我可以轻松地在 javascript 中重用它。

4

5 回答 5

20

在less.js 中，您可以使用 javascript 插值（使用反引号）。并调用一个函数，该函数使用文件中的变量加载 json 对象......您可以通过它的键从中提取变量 - 可能是这个方向的东西：

@json_file: myvars.json;

@json: ~`json = function($key) { var request = new XMLHttpRequest(); request.open("GET", "@{json_file}", false); request.send(null); var my_json = JSON.parse(request.responseText); return my_json[$key]; }`;

body {
  background-color: ~`json('color1')`;
}

这可能看起来不太优雅，但它确实有效。一个更优雅的选择可能是在调用脚本之前在全局 LESS 对象中定义您的自定义用户函数，但我从来没有真正打扰过它，因为我总是在开发中使用 LESS 客户端。

您可以做的另一件事是在 javascript 中加载 json 文件（在浏览器中调用 LESS 脚本之后）并使用该less.modifyVars()函数使用 json 变量重新编译 LESS。您可以在您的 html 中执行此操作（这里我使用纯 JS，但如果您使用 jQuery.getJSON 会更简单）：

<link rel="stylesheet/less" href="style.less" type="text/css">
<script type="text/javascript">less = { env: "development" };</script>
<script src="http://rawgithub.com/less/less.js/master/dist/less-1.4.1.min.js" ></script>
<script type="text/javascript">
    var request = new XMLHttpRequest();
    request.open("GET", "myvars.json", false);
    request.send(null);
    var my_json = JSON.parse(request.responseText);
    less.modifyVars(my_json);
</script>

以及您的 LESS 样式文件中的类似内容：

@color1: darkblue; //default value - will get overwritten by .modifyVars()

body {
  background-color: @color1;
}

另一个注意事项： LESS 中的所有变量名都必须以at符号 ( @) 开头。但是，json 变量不需要，因为会less.modifyVars()自动在变量前面加上@if 缺失。

希望这能给你一些想法。可能有更好的方法来做到这一点......但这两种方法对我有用。

于 2013-10-09T02:29:39.937 回答
3

如果你不在浏览器中使用 LESS 而是编译 CSS，我只是发布了一个 gulp 插件来完成这项工作。

它看起来像这样：

css/myvars.json

{
    "color1": "#112345",
    "color2": "#667890"
}

less/styles.less

@json-import "myvars.json";

body {
  background-color: @color1;
}

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var lessJsonImport = require('gulp-less-json-import');

gulp.task('less', function(){ 
  gulp.src(['./less/**/*.less', '!./less/**/_*.less'])
      .pipe(lessJsonImport())
      .pipe(less())
      .pipe(gulp.dest('./css'));
});
于 2016-07-06T13:35:56.157 回答
0

在浏览器中使用 LESS 时，还有一个“globalVars”选项可用于在加载 LESS 文件之前设置变量：http: //lesscss.org/usage/#using-less-in-the-browser-options

于 2015-08-10T13:20:02.303 回答
0

您可以使用globalVarsless 选项来提供从 json 文件加载的对象。

例如，使用 less-loader 插件webpack.config.js将如下所示：

function lessGlobalVars() {
    return require('flat')(require('./path/to/config.json'),
        {
            delimiter: '_'
        });
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            options: {
              globalVars: lessGlobalVars()
            }
          }
        ]
      }
    ]
  }
};

config.json：

{
  "dimensions": {
    "width": 100,
    "height": 50
  }
}

globalVars只接受扁平结构，所以我们需要扁平包，它将加载的对象扁平化为require('./path/to/config.json')：

{
  dimensions_width: 100,
  dimensions_height: 50
}

将此对象传递给globalVars选项将使全局变量@dimensions_width可@dimensions_height用于所有较少的样式表：

.some-class {
  width: @dimensions_width;
  height: @dimensions_height;
}
于 2019-06-28T12:20:15.267 回答
0

这里描述了一种相对较新的方法：

myPluginFile.js：

const axios = require('axios').default

module.exports = {
  install: function (less, pluginManager, functions) {
    functions.add("blue", function () {

      const headers = {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        timestamp: +new Date(),
      }  
      
      try {
        const method = 'get'
        const url = 'https://myAPI.com/myFile.json'
        const options = { headers: { ...headers } }
        const { data } = await axios[method](url, {}, options)
        return data
      } catch (error) {
        console.info('Error', { msg: error.message })
      }
    });
  },
};

myStyleFile.less：

@plugin "myPluginFile";

/* Style the body */
body {
  color: blue();
}
于 2021-03-12T02:47:11.990 回答