使用 Nginx 編譯 Sass 和 Scss

y1chuan 發(fā)布于2019-07-25 14:16 / 871人閱讀

摘要：前端的小伙伴對(duì)于或以下統(tǒng)稱(chēng)應(yīng)該并不陌生，他是一種預(yù)處理語(yǔ)言，使用可以極大簡(jiǎn)化代碼的編寫(xiě)和維護(hù)。通常情況下，我們?cè)陂_(kāi)發(fā)環(huán)境下使用是在或者環(huán)境下，通過(guò)監(jiān)聽(tīng)文件修改來(lái)實(shí)時(shí)編譯并輸出到瀏覽器。

前端的小伙伴對(duì)于 Sass 或 Scss（以下統(tǒng)稱(chēng) Sass）應(yīng)該并不陌生，他是一種 CSS 預(yù)處理語(yǔ)言，使用 Sass 可以極大簡(jiǎn)化 CSS 代碼的編寫(xiě)和維護(hù)。

通常情況下，我們?cè)?strong>開(kāi)發(fā)環(huán)境下使用 Sass 是在 webpack dev server 或者 Gulp 環(huán)境下，通過(guò)監(jiān)聽(tīng)文件修改來(lái)實(shí)時(shí)編譯 Sass 并輸出 CSS 到瀏覽器。接下來(lái)，我想給大家介紹一種獨(dú)辟蹊徑的方式，那就是在開(kāi)發(fā)環(huán)境下通過(guò) Nginx 編譯 Sass 并實(shí)時(shí)輸出 CSS 到瀏覽器的方法。

下面簡(jiǎn)單介紹一下如何搭建環(huán)境：（如不想自己配置環(huán)境，文末提供了一個(gè) Docker 鏡像，可以一鍵搭建環(huán)境）

Nginx 設(shè)置

為了支持 Sass 的編譯，我們需要 Nginx Lua module，也就是 openresty，安裝方法可以參考官網(wǎng): https://openresty.org/cn/inst... 或 https://github.com/openresty/... 。Ubuntu 系統(tǒng)可以直接通過(guò) apt 包管理安裝: apt install nginx libnginx-mod-http-lua

確保 Lua 模塊安裝好以后，我們還需要一些處理 Sass 的 Lua 腳本，可以從這里下載: https://github.com/hex-ci/doc... ，把代碼解壓縮到目錄下，例如: /your/path/lua，然后我們來(lái)配置 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;
        }

        # 其它配置...
    }
}

安裝依賴(lài)

編譯 Sass 還需要系統(tǒng)安裝 libsass 和 lua-zlib，在 Ubuntu 下可以通過(guò) apt 安裝: apt install libsass-dev lua-zlib-dev

如需自己編譯請(qǐng)參考 https://github.com/sass/libsass 和 https://github.com/brimworks/...

使用

經(jīng)過(guò)以上配置，Nginx 將支持 .scss 和 .sass 文件的實(shí)時(shí)編譯，也支持 .html、.php 等內(nèi)聯(lián) Sass 的編譯，例如：

Docker 鏡像

為便于環(huán)境的搭建，制作了一個(gè) Docker 鏡像，可以很方便的搭建支持 Sass 的 Nginx。

鏡像 github: https://github.com/hex-ci/doc...

啟動(dòng)容器：docker run --name your-name -v /your/html/path:/usr/share/nginx/html -p your-port:80 -d codeigniter/nginx-lua-sass:3

使用自定義配置啟動(dòng)容器: 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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/39914.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

y1chuan

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

程序員的算法趣題Q46: 唯一的OX序列

閱讀 2243·2021-09-30 09:47
name域名優(yōu)惠碼：Name域名新注冊(cè)/續(xù)費(fèi)優(yōu)惠/免費(fèi)隱私保護(hù)/技巧心得

閱讀 1017·2021-08-27 13:01
記錄一次面試題

閱讀 2984·2019-08-30 15:54
JS基礎(chǔ)入門(mén)篇（三十三）—正則表達(dá)式

閱讀 3711·2019-08-30 15:53
2017前端技術(shù)大盤(pán)點(diǎn)

閱讀 852·2019-08-29 14:07
玩轉(zhuǎn)CSS選擇器（二）之瀏覽器支持，常見(jiàn)Bug，性能優(yōu)化

閱讀 747·2019-08-28 18:16
async/await 和 Promise 的用例&關(guān)系

閱讀 836·2019-08-26 18:37
VUE es6技巧寫(xiě)法（持續(xù)更新中~~~）

閱讀 1443·2019-08-26 13:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用 Nginx 編譯 Sass 和 Scss

相關(guān)文章