logo标签列表

从JSON文件中加载变量到LESS CSS预处理器

javascriptcssjsonlessstylus
26

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

使用文件myvars.json的内容。

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

在 Stylus 中，我要做的是...

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

能否在LESS中实现这一点？

我希望将文件保持为JSON格式，以便轻松地在JavaScript中重复使用它。

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客户端。

另一件你可以做的事情- 在浏览器中调用LESS脚本后，在JavaScript中加载json文件，并使用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()会自动在缺失@符号时添加它们。

希望这能给您一些想法。可能有更好的方法来实现它...但这两种方法对我有效。

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'));
});
0

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

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();
}
0

您可以使用globalVars选项，提供从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 只接受扁平结构，因此我们需要一个 flat 包，它将通过require('./path/to/config.json')加载的对象分解为：

{
  dimensions_width: 100,
  dimensions_height: 50
}

将此对象传递给globalVars选项，将使全局变量@dimensions_width和@dimensions_height在所有less样式表中可用：
.some-class {
  width: @dimensions_width;
  height: @dimensions_height;
}
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接