README

一个用于渲染内联 SASS 文件的 Twig 扩展/函数，用于 SEO 目的。您还可以在 SASS 文件中使用 twig 变量。

设置

将 RenderFunction 添加到 Twig

$twig = new Twig_Environment(new Twig_Loader_Filesystem());
$renderFunction = new \Richard87\TwigSass\RenderFunction(
    new \Leafo\ScssPhp\Compiler(),
    new Richard87\NullCache\NullCachePool()
    );
$twig->addExtension($renderFunction);

如果您正在使用 Symfony，请将以下内容添加到 services.yml

app.sass_compiler:
    class: Leafo\ScssPhp\Compiler

app.twig.sass_renderer:
    class: Richard87\TwigSass\RenderFunction
    arguments: ['@app.sass_compiler','@cache.app']
    tags:
      - { name: twig.extension}

选项

RenderFunction 接收 4 个参数

• Leafo\ScssPhp\Compiler：负责实际编译您的 SASS 文件
• PSR6 Cache Pool：需要 PSR6 兼容的 Cache pool 来获得任何有用的性能
• importDir：SCSS 应该查找库的位置，通常是您的 node_modules 所在的位置（我的在 web 目录中）
• sassFormater：您的输出应该如何看起来。以字符串格式接收一个类名。可以是以下任何值
  • "Leafo\ScssPhp\Formatter\Expanded"
  • "Leafo\ScssPhp\Formatter\Nested"
  • "Leafo\ScssPhp\Formatter\Compressed"
  • "Leafo\ScssPhp\Formatter\Compact"
  • "Leafo\ScssPhp\Formatter\Crunched"

用法

然后这样渲染内联样式

<style>
    {{ renderSass("styles.scss.twig") }}
</style>

styles.scss.twig

$brand-primary: #59cc4a;
$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;
@import "node_modules/bootstrap/scss/bootstrap";

注意，node_modules 在 web 目录中，但可以通过 importRootDir 变量轻松更改。

您还可以这样使用内置的 renderSass 过滤器

<style>
    {{ '$brand-primary: #59cc4a;@import "node_modules/bootstrap/scss/bootstrap";'|renderSass }}
</style>

待办事项

• 创建一个自动渲染 *.scss.twig 模板的 Symfony 钩子
• 编写测试