在Node.js和Sass之间共享configurationvariables
我正在开发一个客户端 – 服务器体系结构的浏览器游戏。 游戏涉及到一个HTMLcanvas作为操场，我希望能够在一个单独的configuration文件中设置这个canvas的尺寸，然后在CSS中重新使用它来定义canvas的实际尺寸和2）在游戏服务器的代码碰撞和东西。
做这个的最好方式是什么？ 我想我必须使用CSS预处理器（Sass或Less），但是如何将JS或JSON文件中的variables导入到Sass中？
对不起，西class牙语:)
有点迟来的答案，但在这里（至less对于其他读者）：预处理器可能是必要的。
我最喜欢的方式是node-sass-json-importer 。
首先是一些configuration
你需要装备自己的节点sass （但是如果你真的使用节点和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文件中定义共享variables，如下所示：
//"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; }
这很容易;）
其他选项如下：如果您select其中的一种：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; }