Azure网站和Sass

Question

我一直试图找到一种方法来支持Windows天蓝网站sass？ 如果有可能，有人可以指点我一些文件或现在让我。 我特别希望支持基于sass（s​​css）构建的Zurb Foundation响应框架。

我已经通过使用带有覆盖css文件的编译css文件来完成此操作。 如果可能的话，我想使用sass的语义样式。

谢谢

Answer 1

是。 但是由于Sass / SCSS，有一些箍。

默认情况下，Foundation使用Compass进行SCSS编译。 但是，Sass和Compass都是用Ruby编写的，Azure WebSites不支持。 （Azure WebSites目前支持.NET，Node.js，PHP和Python 。）从命令行运行compass将SCSS编译为浏览器所需的CSS并在HTML中引用; 这个CSS（实际上，整个样式表目录）没有提交到Git中。

如果要将应用程序手动部署到Azure WebSites中，则只需先运行Compass，然后再推送文件，包括生成的stylesheet/目录。 但是，我假设你想要通过Git部署。

因为Azure WebSites不支持Ruby，这意味着我们需要一个完全没有Ruby的选项。 幸运的是，Foundation已使用LibSass库支持此功能。 创建新的Foundation项目时，请使用--libsass标志。

foundation new PROJECT_NAME --libsass

这不使用compass watch来监视和编译SCSS文件，而是使用Node.js和GruntJS。 从命令行执行grunt以监视和编译SCSS。 （Watch and Build是Foundation的Grunt设置的默认任务，因此您无需指定任务名称。）

从那里，您可以使用Azure CLI和Kudu配置Azure Git部署以执行Grunt，以将SCSS编译为部署的一部分。

安装Azure CLI

npm install -g azure-cli

然后从Node.js部署（为Grunt提供动力）开始。

azure site deploymentscript --node

您需要修改Azure CLI生成的部署脚本（ deploy.sh ），以便它在部署时执行Grunt。 在deploy.sh ，有# Deployment部分。 用以下内容替换整个部分：

# Deployment
# ----------

echo Handling node.js grunt deployment.

# 1. Select node version
selectNodeVersion

# 2. KuduSync to wwwroot
"$KUDU_SYNC_CMD" -v 500 -f "$DEPLOYMENT_SOURCE" -t "$DEPLOYMENT_TARGET" -n "$NEXT_MANIFEST_PATH" -p "$PREVIOUS_MANIFEST_PATH" -i ".git;.deployment;deploy.sh;README.md;"
exitWithMessageOnError "Kudu Sync to Target failed"

# 3. Install npm packages
if [ -e "$DEPLOYMENT_TARGET/package.json" ]; then
  eval $NPM_CMD install
  exitWithMessageOnError "npm failed"
fi

# 4. Install bower packages
if [ -e "$DEPLOYMENT_TARGET/bower.json" ]; then
  eval $NPM_CMD install bower
  exitWithMessageOnError "installing bower failed"
  ./node_modules/.bin/bower install
  exitWithMessageOnError "bower failed"
fi

# 5. Run grunt
if [ -e "$DEPLOYMENT_TARGET/Gruntfile.js" ]; then
  eval $NPM_CMD install grunt-cli
  exitWithMessageOnError "installing grunt failed"
  ./node_modules/.bin/grunt --no-color build
  exitWithMessageOnError "grunt failed"
fi

这将（1）安装所需的所有npm软件包（如node-libsass ），安装所需的所有bower软件包（如foundation ），并运行grunt build来编译SCSS。

一个警告

Azure WebSites也不支持编译Node.js包。 它将运行包，但它不会编译它们，因此需要对它们进行预编译，然后将其提交到Git中。 这意味着./node_modules/node-sass/**将需要提交到Git中。 另外：由于模块在OSX与Windows上的编译方式不同，这意味着您需要从Windows机器提交node-sass，以便该模块的Windows编译版本在Git中。

不幸的是，如果您尝试从OSX开发机器运行此项目，这将导致问题。

LESS下不存在的所有问题。 由于LESS起源于JavaScript社区而不是Ruby社区，因此它的主要解释器采用JavaScript，并由Node.js（以及Azure WebSites）本机支持。 这些JavaScript解释器也不需要编译，因此它们不需要提交node_modules。 但是由于基金会使用Sass，这些都是你必须要跳过的箍。

并不是说LESS没有自己的问题，只有不同的问题，而不是这些问题。