在Node.js和Sass之间共享配置变量 [英] Sharing config variables between Node.js and Sass

问题描述

我正在开发具有客户端-服务器体系结构的浏览器游戏。该游戏将一个HTML画布用作游乐场，我希望能够在单个配置文件中设置此画布的尺寸，然后在1）CSS中重用它来定义画布的实际尺寸和2）

执行此操作的最佳方法是什么？我想我必须使用CSS预处理程序（Sass或更少），但是如何将JS或JSON文件中的变量导入Sass？

对不起，西班牙语不好：）

解决方案

答案有点晚，但这是（至少对于其他读者而言）：css预处理器可能是必需的。 / p>

我最喜欢的方法是节点-sass-json-importer 。

首先，进行一些配置

为自己配备 node-sass （但是，如果您实际上同时使用node和sass，则我可能已经做到了）。您可以在 node-sass 文件中指定 importer 选项：

  var sass = require（'node-sass'）; 
 var jsonImporter = require（'node-sass-json-importer'）; 
 
 //示例1 
 sass.render（{
文件：scss_filename，
导入者：jsonImporter，
 [，options ..] 
}，function（err，result）{/*...*/}）; 
  

或者如果您将Webpack与 sass-loader （我的首选方式）：

  import来自'node-sass-json-importer'的jsonImporter; 
 
 // Webpack配置
导出默认值{
模块：{
 // sass-loader用法示例。 
 // //参见：https://github.com/jtangelder/sass-loader#apply-via-webpack-config 
加载程序：[{
测试：/\.scss$/ ，
加载程序：[ style， css， sass] 
}]，
}，
 sassLoader：{
 //应用JSON导入程序通过sass-loader的选项。 
进口商：jsonImporter 
} 
}; 
  

现在实际使用情况

在json文件中定义共享变量，例如：

  // src / shared / dimensions.js 
 {
 width： 600px，
 height： 400px，
} 
  

要在js中使用它，好吧……它是JSON;）要在SASS中使用：

  // src / scss / game.scss 
 @import'../shared/dimensions.json'//是，您实际上可以在此处导入json 
 canvas {
 height ：$ height; 
 width：$ width; 
} 
  

那很简单;）

---

其他选项如下：如果您选择以下之一：手写笔，Sass或LESS，则可以使用罗塞塔。这样，您可以在一个文件中指定共享数据，例如：

  // 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 
可变尺寸= require（'./ dimensions.js '）
 initGame（{width：Dimensions.width.val，height：Dimensions.height.val}）
 
 //\"src/scss/game.scss 
 @ import'./dimensions.scss'
 canvas {
 height：$ height; 
 width：$ width; 
} 
  

I am developing a browser game with a client-server architecture. The game involves an HTML canvas as the playground, and I would like to be able to set the dimensions of this canvas in a single config file, and then reuse it 1) in the CSS to define the actual dimensions of the canvas and 2) in the code of the game server for collisions and stuff.

What is the best way to do this? I think I have to use a CSS preprocessor (Sass or Less), but how can I import variables from JS or JSON files into Sass?

Sorry for bad spanish :)

解决方案

A bit late answer, but here it is (at least for other readers): css preprocessor will probably be necessary.

My favorite way to go is node-sass-json-importer.

First, a bit of configuration

You need to equip yourself with node-sass (but if you're actually using both node and sass, you've probably done that already). You specify the importer option in your 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) { /*...*/ });

or if you're using webpack with sass-loader (my preferred way):

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

Now the actual usage

You just define shared variables in a json file, like this:

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

To use it in js, well... it's JSON ;) To use in SASS:

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

THAT easy ;)

---

The other options is the following: if you opt for one of those: Stylus, Sass or LESS, you can use Rosetta. With that, you specify the shared data in one file like:

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

compile the file like this:

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

You reference the generated files in the standard way:

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

这篇关于在Node.js和Sass之间共享配置变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！