使用 Nginx 编译 Sass 和 Scss

前端的小伙伴对于 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 的编译，例如：

<style type="text/scss">
.demo-1 {
   color: red;

  .demo-1-1 {
     color: blue;
  }
}
</style>

<style type="text/sass">
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none
</style>

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

最后，欢迎与你们多多交流有意思的技术~谢谢~