Azure 网站和 Sass [英] Azure Websites and Sass

问题描述

我一直在尝试寻找是否有办法通过 Windows azure 网站支持 sass?有人可以指点我一些文件，或者如果可能的话，现在让我看看.我特别希望支持基于 sass(scss) 构建的 Zurb Foundation 响应式框架.

I have been trying to find if there is a way to support sass with a windows azure website? Can someone point me to some documentation or let me now if this is even possible. I am specifically looking to support Zurb Foundation responsive framework which is built on sass(scss).

我已经通过使用已编译的 css 文件和覆盖 css 文件来做到这一点.如果可能，我想使用 sass 的语义样式.

I already do this by using the complied css files with an override css file. I would like to use the semantic styling of sass if possible.

谢谢

推荐答案

是的.但是由于 Sass/SCSS 存在一些问题.

Yes. But there are a few hoops because of Sass/SCSS.

默认情况下，Foundation 使用 Compass 进行 SCSS 编译.但是，Sass 和 Compass 都是用 Ruby 编写的，Azure 网站不支持.(Azure 网站当前支持 .NET、Node.js、PHP 和 Python.) 从命令行运行 compass 会将您的 SCSS 编译为浏览器所需的 CSS 并在您的 HTML 中引用；这个 CSS(实际上是整个 Stylesheet 目录)没有提交到 Git 中.

By default, Foundation uses Compass for its SCSS compilation. However, Sass and Compass are both written in Ruby, which Azure WebSites does not support. (Azure WebSites currently supports .NET, Node.js, PHP, and Python.) Running compass from the command line compiles your SCSS into the CSS needed by your browser and referenced in your HTML; this CSS (really, the entire Stylesheet directory) is not committed into Git.

如果您想手动将应用程序部署到 Azure 网站，则只需事先运行 Compass，然后将您的文件向上推送，包括生成的 stylesheet/ 目录.但是，我假设您想通过 Git 部署运行.

If you want to manually deploy your application into Azure WebSites, then just run Compass before hand, and then push up your files, including the generated stylesheet/ directory. However, I'm assuming you want to run through Git Deployment.

因为 Azure 网站不支持 Ruby，这意味着我们需要一个完全无 Ruby 的选项.幸运的是，Foundation 已经使用 LibSass 库支持这一点.创建新的 Foundation 项目时，请使用 --libsass 标志.

Because Azure WebSites does not support Ruby, that means we need to have an entirely Ruby-free option. Fortunately, Foundation already supports this using the LibSass library. When you create your new Foundation project, use the --libsass flag.

foundation new PROJECT_NAME --libsass

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

Instead of running compass watch to monitor and compile your SCSS files, this uses Node.js and GruntJS. Execute grunt from the command line to monitor and compile your SCSS. (Watch and Build are the default tasks for Foundation's Grunt setup, so you don't need to specify the task name.)

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

From there, you can use the Azure CLI and Kudu to configure your Azure Git Deployment to execute Grunt to compile your SCSS as a part of your deployment.

安装 Azure CLI

Install the Azure CLI

npm install -g azure-cli

然后从 Node.js 部署开始(为 Grunt 提供支持).

Then start with a Node.js Deployment (which powers Grunt).

azure site deploymentscript --node

您需要修改 Azure CLI 生成的部署脚本 (deploy.sh)，以便在部署时执行 Grunt.在 deploy.sh 中，有一个 #Deployment 部分.将整个部分替换为以下内容:

You will need to modify your deployment script (deploy.sh) that the Azure CLI generates so that it will execute Grunt on deploy. In deploy.sh, there is a # Deployment section. Replace the entire section with the following:

# 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.

This will (1) install all of the npm packages you need (like node-libsass), install all of the bower packages you need (like foundation), and run grunt build to compile your SCSS.

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

Azure WebSites also doesn't support compiling Node.js packages. It will run the package, but it won't compile them, so they will need to be precompiled and then committed into Git. This means that ./node_modules/node-sass/** will need to be committed into Git. Also: since modules will compile differently on OSX vs. Windows, this means that you need to commit node-sass from a Windows machine so that a Windows-compiled version of the module is in Git.

很遗憾，如果您尝试从 OSX 开发机器运行此项目，这将导致问题.

Unfortunately, this will cause problems if you try and run this project from an OSX development machine.

LESS 下不存在的所有问题.由于 LESS 起源于 JavaScript 社区而不是 Ruby 社区，因此它的主要解释器是 JavaScript 并由 Node.js(以及因此 Azure 网站)原生支持.这些 JavaScript 解释器也不需要编译，因此它们不需要提交 node_modules.但由于 Foundation 使用 Sass，因此您必须跳过这些障碍.

All problems that don't exist under LESS. Since LESS originated in the JavaScript community rather than the Ruby community, its primary interpreters are in JavaScript and natively supported by Node.js (and thus Azure WebSites). These JavaScript interpreters also do not need to be compiled, so they don't need their node_modules committed. But since Foundation uses Sass, these are the hoops you have to jump through.

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

Not that LESS doesn't have its own issues, just different ones, and not these.

这篇关于Azure 网站和 Sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！