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沒有自己的問題，只有不同的問題，而不是這些問題。