使用 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 = nilngx.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 = nilngx.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">
navulmargin: 0padding: 0list-style: nonelidisplay: inline-blockadisplay: blockpadding: 6px 12pxtext-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
最后,欢迎与大家多多交流有意思的技术~谢谢~
使用 Nginx 编译 Sass 和 Scss相关推荐
- webstorm和intellij idea下如何自动编译sass和scss文件
前言 学过css的人都知道,css他不是一个编程语言.虽然你可以用css去写网页样式,但是你却没法使用它进行编程.所以有一句话来描述css我个人觉得再合适不过了,"CSS基本上是设计师的工具 ...
- html中将scss转编译为css,SASS把scss转化为css的四种转化方式与命令
在终端输入命令: $ sass --watch scss:css --style expanded 即可实时把scss文件夹下的scss文件转化为css文件放入css文件夹中, 命令中使用的是expa ...
- Vue 应用 Sass、Scss、Less 和 Stylus
Vue项目中应用预处理器,可以有效减少css代码量, 推荐使用Sass.Scss.Less预处理器.在创建项目的时候可以选择预处理器 (Sass/Less/Stylus). 如果当时没有选择,内置的 ...
- SASS 和 SCSS 的区别
原文 Difference Between SASS and SCSS SASS(Syntactically Awesome Style Sheets)是一种由 Hampton Catlin 设计.C ...
- 关于sass(scss)、less、postcss、stylus等的用法与区别
一. Sass/Scss.Less.stylus是什么? 它们都是css预处理器.css预处理器的概念:CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项 ...
- 28和lba48命令格式区别_编译Sass(命令行)
本文作者:开课吧无忧 图文编辑:开三金 sass编译有很多种方式,如命令行编译模式.编辑器自动编译.编译软件koala.sass-loader等. 今天我们就先来看第一种:命令行编译 刚才我在test ...
- sass webpack_如何在Visual Studio和Webpack中编译Sass文件
sass webpack Sass is a very popular CSS pre-processor. The intent of this tutorial is to show you ho ...
- Css、less和Sass(SCSS)的区别
随着前端开发的不断发展,CSS也逐渐延伸出了很多新的语言,less和Sass就是其中两种,下面我们就一起来看看它们到底有何区别. 背景 CSS(Cascading Style Sheets,层叠样式表 ...
- css,sass,scss和less的区别
css,sass,scss和less的区别 1.css 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语 ...
最新文章
- import和from...import
- CentOS 阿里云硬盘扩容
- reactjs三个常用的Hook:State Hook、 Effect Hook、 Ref Hook
- php7 编译参数详解,php7.4.5编译安装参数变更
- 200822C阶段一文件
- Avro从入门到入土
- Java中List、Collections实现梭哈游戏
- leetcode题库572 -- 另一个树的子树
- [线筛五连]线筛约数和
- 【数据可视化】飞线图(航线图)在地图中的生成的三种方案
- Favicon网页收藏图标在线制作PHP网站源码/ICO图片在线生成/支持多种图片格式转换
- NRF 52832 ble_app_blinky 官方示例 part1
- Permission denied (publickey).../RPC failed; curl 92 HTTP/2 stream 0 was.../pack exceeds maximum all
- 最常用20000英语单词表_受够加班煎熬,我整理出10条职场人士最常用的透视表技巧!(下篇)...
- 宏基d260linux系统,千呼万唤始出来 宏碁D260新本仅售2499
- The puzzle
- word编写页码,取消封面编码
- 单片机list文件解析及 hardfalt问题定位
- 快速生成树(RSTP)
- cad中简单流程图制作_1600字解读装修施工流程,看完你就入门了!(流程图制作中)...