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

Question

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

最好的方法是什么？我想我必须使用 CSS 预处理器(Sass 或 Less)，但如何将变量从 JS 或 JSON 文件导入 Sass？

抱歉西类牙语不好:)

Answer 1

答案有点晚，但在这里(至少对于其他读者而言):css 预处理器可能是必要的。

我最喜欢的方式是 node-sass-json-importer .

首先，一些配置

你需要装备自己 node-sass (但如果你实际上同时使用 node 和 sass，你可能已经这样做了)。您在 node-sass 文件中指定 importer 选项:

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) { /*...*/ });

或者如果您将 webpack 与 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 .这样，您就可以在一个文件中指定共享数据，例如:

//"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;
}