Azure 网站和 Sass

2024-03-08

我一直在尝试寻找是否有一种方法可以通过 windows azure 网站支持 sass?有人可以向我指出一些文档吗?或者如果可能的话现在就让我知道。我特别希望支持祖布基金会 http://foundation.zurb.com/index.html基于 sass(scss) 构建的响应式框架。

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

Thanks


是的。但由于 Sass/SCSS,存在一些限制。

默认情况下,Foundation 使用 Compass 进行 SCSS 编译。但是,Sass 和 Compass 都是用 Ruby 编写的,Azure 网站不支持 Ruby。 (Azure 网站当前支持.NET、Node.js、PHP 和 Python http://www.windowsazure.com/en-us/documentation/services/web-sites/。) 跑步compass从命令行将您的 SCSS 编译为浏览器所需的 CSS 并在 HTML 中引用;此 CSS(实际上是整个样式表目录)未提交到 Git 中。

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

由于 Azure 网站不支持 Ruby,这意味着我们需要一个完全不含 Ruby 的选项。幸运的是,Foundation 已经使用 LibSass 库支持这一点。当您创建新的 Foundation 项目时,请使用--libsass flag.

foundation new PROJECT_NAME --libsass

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

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

安装 Azure CLI

npm install -g azure-cli

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

azure site deploymentscript --node

您将需要修改您的部署脚本(deploy.sh),Azure CLI 生成,以便它将在部署时执行 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 网站也不支持编译 Node.js 包。它将运行该包,但不会编译它们,因此需要预编译它们,然后提交到 Git 中。这意味着./node_modules/node-sass/**需要提交到 Git 中。另外:由于模块在 OSX 和 Windows 上的编译方式不同,这意味着您需要从 Windows 计算机提交 node-sass,以便在 Git 中包含该模块的 Windows 编译版本。

不幸的是,如果您尝试从 OSX 开发机器运行此项目,这将导致问题。

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Azure 网站和 Sass 的相关文章

随机推荐