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

【问题标题】：Sharing config variables between Node.js and Sass在 Node.js 和 Sass 之间共享配置变量
【发布时间】：2015-09-21 01:58:27
【问题描述】：

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

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

抱歉西班牙语不好:)

【问题讨论】：

你不能将js变量传递给Sass，对不起。
Less 怎么样？没有其他解决方案吗？

标签： node.js sass config

【解决方案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) { /*...*/ });

或者，如果您使用带有 sass-loader 的 webpack（我的首选方式）：

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

【讨论】：