摘要：前端的小伙伴对于或以下统称应该并不陌生，他是一种预处理语言，使用可以极大简化代码的编写和维护。通常情况下，我们在开发环境下使用是在或者环境下，通过监听文件修改来实时编译并输出到浏览器。
前端的小伙伴对于 Sass 或 Scss（以下统称 Sass） 应该并不陌生，他是一种 CSS 预处理语言，使用 Sass 可以极大简化 CSS 代码的编写和维护。
通常情况下，我们在开发环境下使用 Sass 是在 webpack dev server 或者 Gulp 环境下，通过监听文件修改来实时编译 Sass 并输出 CSS 到浏览器。接下来，我想给大家介绍一种独辟蹊径的方式，那就是在开发环境下通过 Nginx 编译 Sass 并实时输出 CSS 到浏览器的方法。
下面简单介绍一下如何搭建环境：（如不想自己配置环境，文末提供了一个 Docker 镜像，可以一键搭建环境）
Nginx 设置为了支持 Sass 的编译，我们需要 Nginx Lua module，也就是 openresty，安装方法可以参考官网: https://openresty.org/cn/inst... 或 https://github.com/openresty/... 。Ubuntu 系统可以直接通过 apt 包管理安装: apt install nginx libnginx-mod-http-lua
确保 Lua 模块安装好以后，我们还需要一些处理 Sass 的 Lua 脚本，可以从这里下载: https://github.com/hex-ci/doc... ，把代码解压缩到目录下，例如: /your/path/lua，然后我们来配置 nginx.conf:
http {
# 其它配置....
lua_package_path "/your/path/lua/?.lua;;";
# 其它配置.....
server {
# 其它配置...
location / {
header_filter_by_lua_block {
ngx.header.content_length = nil
ngx.header.content_encoding = ""
}
body_filter_by_lua_file /your/path/lua/body.lua;
try_files $uri $uri/ =404;
}
location ~ .php$ {
# 其它配置...
header_filter_by_lua_block {
ngx.header.content_length = nil
ngx.header.content_encoding = ""
}
body_filter_by_lua_file /your/path/lua/body.lua;
}
location ~ ^.*.scss$ {
set $sass_output_style expanded;
set $sass_source_map_embed on;
set $sass_source_map_contents on;
set $sass_is_indented_syntax_src off;
content_by_lua_file /your/path/lua/resty/sass/autocompile.lua;
}
location ~ ^.*.sass$ {
set $sass_output_style expanded;
set $sass_source_map_embed on;
set $sass_source_map_contents on;
set $sass_is_indented_syntax_src on;
content_by_lua_file /your/path/lua/resty/sass/autocompile.lua;
}
# 其它配置...
}
}
安装依赖
编译 Sass 还需要系统安装 libsass 和 lua-zlib，在 Ubuntu 下可以通过 apt 安装: apt install libsass-dev lua-zlib-dev
如需自己编译请参考 https://github.com/sass/libsass 和 https://github.com/brimworks/...
使用经过以上配置，Nginx 将支持 .scss 和 .sass 文件的实时编译，也支持 .html、.php 等内联 Sass 的编译，例如：
Docker 镜像为便于环境的搭建，制作了一个 Docker 镜像，可以很方便的搭建支持 Sass 的 Nginx。
镜像 github: https://github.com/hex-ci/doc...
启动容器：docker run --name your-name -v /your/html/path:/usr/share/nginx/html -p your-port:80 -d codeigniter/nginx-lua-sass:3
使用自定义配置启动容器: docker run --name your-name -v /your/html/path:/usr/share/nginx/html -v /your/path/default.conf:/etc/nginx/conf.d/default.conf -p your-port:80 -d codeigniter/nginx-lua-sass:3
最后，欢迎与大家多多交流有意思的技术~谢谢~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/39914.html
摘要：前端的小伙伴对于或以下统称应该并不陌生，他是一种预处理语言，使用可以极大简化代码的编写和维护。通常情况下，我们在开发环境下使用是在或者环境下，通过监听文件修改来实时编译并输出到浏览器。 前端的小伙伴对于 Sass 或 Scss（以下统称 Sass） 应该并不陌生，他是一种 CSS 预处理语言，使用 Sass 可以极大简化 CSS 代码的编写和维护。 通常情况下，我们在开发环境下使用 S...
摘要：现如今预处理有恨多种，在这里我们主要介绍。好在和有自动编译和功能，极大便捷我们的开发，下面我们就说一下如何去配置。和下自动编译和文件配置第一步检查是否安装了利用这条命令查看是否安装了，出现版本号即为安装成功。如果需要自动也是一样。 前言 学过css的人都知道，css他不是一个编程语言。虽然你可以用css去写网页样式，但是你却没法使用它进行编程。所以有一句话来描述css我个人觉得再合适不...
摘要：使用，已改为使用，所以首先解决编译问题。编译与无关，需要在系统中安装编译环境。使用编译源码结构简单分析源码，其中文件夹包含了所有样式文件源码，部件和工具都是单独的文件，很清晰。可以看到命令已成功运行，及文件已经生成。 环境： macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 ...
摘要：不过必须要先安装，然后再安装。淘宝镜像安装由于国内网络原因你懂的，导致存放在上面的资源文件间歇性连接失败。嵌套可以进行选择器的嵌套，表示层级关系。重要注释管理项目文件结构预处理器的特点之一是可以把你的代码分割成很多文件，而且不会影响性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...
阅读 1961·2021-09-30 09:47
阅读 645·2021-08-27 13:01
阅读 2667·2019-08-30 15:54
阅读 3544·2019-08-30 15:53
阅读 721·2019-08-29 14:07
阅读 563·2019-08-28 18:16
阅读 677·2019-08-26 18:37
阅读 1265·2019-08-26 13:27
