Question

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

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

由于

Answer 1

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

默认情况下，Foundation使用Compass进行SCSS编译。但是，Sass和Compass都是用Ruby编写的，Azure WebSites不支持。（Azure WebSites目前支持.NET, Node.js, PHP, and 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没有自己的问题，只有不同的问题，而不是这些。

Azure网站和Sass

1 个答案:

一个警告