使用 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

最後，歡迎與你們多多交流有意思的技術~謝謝~