使用 Nginx 編譯 Sass 和 Scss

Hex發表於2019-01-19
Nginx編譯CSS

前端的小夥伴對於 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

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

相關文章