使用 Nginx 編譯 Sass 和 Scss

2021-09-13 18:50:22 字數 1474 閱讀 3955

前端的小夥伴對於 sass 或 scss(以下統稱 sass) 應該並不陌生,他是一種 css 預處理語言,使用 sass 可以極大簡化 css **的編寫和維護。

通常情況下,我們在開發環境下使用 sass 是在 webpack dev server 或者 gulp 環境下,通過監聽檔案修改來實時編譯 sass 並輸出 css 到瀏覽器。接下來,我想給大家介紹一種獨闢蹊徑的方式,那就是在開發環境下通過 nginx 編譯 sass 並實時輸出 css 到瀏覽器的方法。

下面簡單介紹一下如何搭建環境:(如不想自己配置環境,文末提供了乙個 docker 映象,可以一鍵搭建環境)

為了支援 sass 的編譯,我們需要 nginx lua module,也就是 openresty,安裝方法可以參考官網: 或 。ubuntu 系統可以直接通過 apt 包管理安裝:apt install nginx libnginx-mod-http-lua

# 其它配置...

}}編譯 sass 還需要系統安裝 libsass 和 lua-zlib,在 ubuntu 下可以通過 apt 安裝:apt install libsass-dev lua-zlib-dev

如需自己編譯請參考 和

經過以上配置,nginx 將支援 .scss 和 .sass 檔案的實時編譯,也支援 .html、.php 等內聯 sass 的編譯,例如:

為便於環境的搭建,製作了乙個 docker 映象,可以很方便的搭建支援 sass 的 nginx。

映象 github:

啟動容器: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

Mac 安裝 Sass 和使用

mac 的 os x 系統自帶 ruby,所以 mac 這步就可以跳過。gem install sass 如果出現permitted問題通常是許可權問題,先嘗試下面 sudo gem install sass 如果安裝無限等待嘗試下面替換rubygems映象 gem sources remove 如...

nginx編譯和安裝

1nginx的編譯安裝 nginx的安裝 cd nginx源包路徑 with pcre pcre源包路徑 add module 上傳模組源包路徑 接下來是常見的 make make install 安裝完後就可以直接用 nginx命令了 開啟服務 nginx 停止服務 nginx s stop 注 ...

less和sass的使用區別

首先我們來說一下less。less中的變數 1.宣告變數使用 變數名 變數值 2.使用變數 變數名 less中的變數型別 數字類 1 10px 字串 無引號字串 red 和有引號字串 gdak 顏色類 red 000000 rgb 值列表型別,用逗號或空格分隔 變數使用原則 多次頻繁出現的值 需要修...