使用 Nginx 编译 Sass 和 Scss

y1chuan 发布于2019-07-25 14:16 / 821人阅读

摘要：前端的小伙伴对于或以下统称应该并不陌生，他是一种预处理语言，使用可以极大简化代码的编写和维护。通常情况下，我们在开发环境下使用是在或者环境下，通过监听文件修改来实时编译并输出到浏览器。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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