使用 Nginx 編譯 Sass 和 Scss

y1chuan 發布于2019-07-25 14:16 / 842人閱讀

摘要：前端的小伙伴對于或以下統稱應該并不陌生，他是一種預處理語言，使用可以極大簡化代碼的編寫和維護。通常情況下，我們在開發環境下使用是在或者環境下，通過監聽文件修改來實時編譯并輸出到瀏覽器。

前端的小伙伴對于 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

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

云服務器 GPU云服務器編譯安裝nginx oneinstack編譯Nginx fa nginx使用教程 SCSS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/39914.html

使用 Nginx 編譯 Sass 和 Scss

摘要：前端的小伙伴對于或以下統稱應該并不陌生，他是一種預處理語言，使用可以極大簡化代碼的編寫和維護。通常情況下，我們在開發環境下使用是在或者環境下，通過監聽文件修改來實時編譯并輸出到瀏覽器。前端的小伙伴對于 Sass 或 Scss（以下統稱 Sass）應該并不陌生，他是一種 CSS 預處理語言，使用 Sass 可以極大簡化 CSS 代碼的編寫和維護。通常情況下，我們在開發環境下使用 S...

ACb0y 2019-08-29 15:15 評論0 收藏0
Mac系統使用VS Code編譯Bootstrap 4

摘要：使用，已改為使用，所以首先解決編譯問題。編譯與無關，需要在系統中安裝編譯環境。使用編譯源碼結構簡單分析源碼，其中文件夾包含了所有樣式文件源碼，部件和工具都是單獨的文件，很清晰。可以看到命令已成功運行，及文件已經生成。環境： macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 ...

simpleapples 2019-04-23 13:29 評論0 收藏0
CSS 強化裝備！Sass 安裝與使用

摘要：不過必須要先安裝，然后再安裝。淘寶鏡像安裝由于國內網絡原因你懂的，導致存放在上面的資源文件間歇性連接失敗。嵌套可以進行選擇器的嵌套，表示層級關系。重要注釋管理項目文件結構預處理器的特點之一是可以把你的代碼分割成很多文件，而且不會影響性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

wuyumin 2019-08-28 18:19 評論0 收藏0
vue入門文章

摘要：本來想自己寫一篇關于入門的文章。后面可能在這篇文章基礎上，有所內容的增加。預處理器定義了一種新的專門的編程語言，編譯后成正常的文件。本來想自己寫一篇關于vue入門的文章。但是看到鏈接的文章后，覺得寫得太詳細了，實在有保存下來的必要。后面可能在這篇文章基礎上，有所內容的增加。 CSS預處理器定義了一種新的專門的編程語言，編譯后成正常的CSS文件。為CSS增加一些編程的特性，無需考慮瀏...

seanHai 2019-08-29 17:06 評論0 收藏0