在 Node.js 和 Sass 之间共享配置变量

我正在开发一个具有客户端-服务器架构的浏览器游戏。该游戏涉及一个 HTML 画布作为游乐场，我希望能够在单个配置文件中设置该画布的尺寸，然后在 CSS 中重用它 1) 来定义画布的实际尺寸和 2)在游戏服务器的代码中用于碰撞和其他内容。

做这个的最好方式是什么？我想我必须使用 CSS 预处理器（Sass 或 Less），但是如何将变量从 JS 或 JSON 文件导入到 Sass 中？

对不起，西班牙语不好:)

答案有点晚了，但就是这样（至少对于其他读者来说）：css 预处理器可能是必要的。

我最喜欢的出行方式是节点 sass-json 导入器 https://github.com/Updater/node-sass-json-importer.

首先，一些配置

你需要装备自己节点 sass https://github.com/sass/node-sass（但如果您实际上同时使用 Node 和 sass，那么您可能已经这样做了）。您指定importer选项在你的node-sass file:

var sass = require('node-sass');
var jsonImporter = require('node-sass-json-importer');

// Example 1
sass.render({
  file: scss_filename,
  importer: jsonImporter,
  [, options..]
}, function(err, result) { /*...*/ });

或者如果你使用 webpacksass 加载器 https://github.com/jtangelder/sass-loader（我的首选方式）：

import jsonImporter from 'node-sass-json-importer';

// Webpack config
export default {
  module: {
    // Example sass-loader usage. 
    // See: https://github.com/jtangelder/sass-loader#apply-via-webpack-config
    loaders: [{
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }],
  },
  sassLoader: {
    // Apply the JSON importer via sass-loader's options.
    importer: jsonImporter
  }
};

现在实际使用情况

您只需在 json 文件中定义共享变量，如下所示：

//"src/shared/dimensions.js"
{
    "width": "600px",
    "height": "400px",
}

要在 js 中使用它，嗯......它是 JSON ；）要在 SASS 中使用：

//"src/scss/game.scss"
@import '../shared/dimensions.json' //Yes, you can actually import json here
canvas {
    height: $height;
    width: $width;
}

就这么简单；）

其他选项如下：如果您选择其中之一：Stylus、Sass 或 LESS，您可以使用Rosetta https://www.npmjs.com/package/rosetta。这样，您就可以在一个文件中指定共享数据，例如：

//"src/shared/dimensions.rose"
$width = 600px
$height = 400px

像这样编译文件：

rosetta --jsout "src/js/dimensions.js" --cssout "src/scss/dimensions.scss" --cssFormat "scss" src/shared/dimensions.rose

您以标准方式引用生成的文件：

//"src/js/game.js"
var dimensions = require('./dimensions.js')
initGame({ width: dimensions.width.val, height: dimensions.height.val })

//"src/scss/game.scss"
@import './dimensions.scss'
canvas {
    height: $height;
    width: $width;
}