node.js – Azure网站和Sass

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

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

谢谢

是.但是由于Sass / SCSS,有一些箍.

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

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

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

foundation new PROJECT_NAME --libsass

这不使用罗盘监视器来监视和编译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软件包(如基础),并运行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没有自己的问题,只有不同的问题,而不是这些问题.