Azure的网站和萨斯 [英] Azure Websites and Sass

问题描述

我一直在试图寻找是否有支持与Windows Azure的网站青菜的方法吗？有人能指出我的一些文档，还是让我现在如果这甚至有可能。我专门找支持 Zurb基金会<​​/A>这是建立在SASS（SCSS）响应的框架。

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文件做到这一点。我想用青菜如果可能的语义造型。

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.

感谢

推荐答案

是的。但也有因为萨斯/ SCSS几个铁圈。

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

在默认情况下，基金会使用罗盘的SCSS编译。然而，萨斯和指南针都用Ruby编写的，它的Azure网站已不支持。 （Azure的网站已目前支持 .NET，Node.js的，PHP和Python 。 ）运行指南针命令行编译你的SCSS到您的浏览器需要在你的HTML中引用的CSS;这个CSS（实际上，整个样式表目录）没有提交到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的网站，然后就用手之前运行指南针，进而推升你的文件，包括生成的样式表/ 目录。不过，我假设你想通过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-自由选择。幸运的是，基金会已经支持这种使用LibSass库。当您创建新的基金项目，使用 - 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

而不是运行指南针观看来监控和编译SCSS文件，这使用的Node.js和GruntJS。执行咕噜通过命令行来监视和编译SCSS。 （观察和构建是基金会的咕噜设置默认的任务，所以您不需要指定任务名称。）

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和捻配置您的Azure的Git部署执行步兵编译您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的部署开始（其中的权力呼噜声）。

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

azure site deploymentscript --node

您将需要修改的部署脚本（ deploy.sh ）表示，Azure的CLI生成，使其上部署执行步兵。在 deploy.sh ，有一个＃部署部分。用以下替换整个部分：

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包（如节点libsass ），安装所有你需要（如亭子包基础），并运行咕噜构建编译您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.

天青的网站同样不支持编译Node.js的包。它将运行包，但它不会编译他们，因此他们将需要precompiled，然后提交到Git的。这意味着 ./ node_modules /节点萨斯/ ** 将需要提交到Git的。另外：由于模块将编译不同的OSX与Windows中，这意味着你需要从Windows机器提交节点青菜使模块的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社区，它的主跨preters在JavaScript和Node.js的由（因而Azure的网站），原生支持。这些JavaScript的跨preters也不需要进行编译，所以他们并不需要他们的node_modules承诺。但是，由于基金使用无礼的话，这些都是箍你必须跳通过。

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.

未少不具有其自身的问题，只是不同的人，而不是这些

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

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