axllent/silverstripe-scss

为 scssphp 创建包装器，以便将 SCSS 编译直接集成到 Silverstripe

维护者

详细信息

github.com/axllent/silverstripe-scss

主页

源代码

问题

安装次数: 12,444

依赖项: 8

建议者: 0

安全: 0

星标: 6

关注者: 4

分支: 3

开放性问题: 0

类型：silverstripe-vendormodule

2.0.0 2024-01-29 18:24 UTC

Requires

MIT edaafe1f374dc6f9e8b1b271547c05086919b3c9

csssassscsssilverstripescssphp

This package is auto-updated.

Last update: 2024-08-29 19:47:43 UTC

README

为 scssphp 创建包装器，以便将 SCSS 编译直接集成到 Silverstripe。

只有当需要时或执行 ?flush 时才编译 SCSS 文件。

功能

  • 无缝地将 scssphp 集成到 Silverstripe
  • 包含刷新选项（?flushstyles）以重新生成 CSS 样式表（即通过 @import 强制未检测到的 SCSS 变更）。注意：这仅适用于 dev 模式下的网站。或者使用 ?flush 刷新包括样式表在内的所有内容。
  • 将处理后的 *.scss 文件写入 assets/_css/ 并自动修改 Requirements 路径
  • 允许通过 YAML 配置将自定义全局变量传递给 SCSS 编译
  • 对 $ThemeDir 提供基本支持（例如：url('#{$ThemeDir}/images/logo.png')（请参阅 配置）
  • 在 live 模式下自动压缩 CSS 文件（可能需要初始的 ?flush）
  • 将任何处理的 editor.scss 文件添加到 TinyMCE（必须在您的前端模板中包含）
  • 仅限 dev 模式下提供源映射（内联或文件），可禁用

要求

  • Silverstripe ^5

安装

composer require axllent/silverstripe-scss

使用

您需要使用完整的 SCSS 文件名引用您的 SCSS 文件（例如：stylesheet.scss）。

示例

<?php
use SilverStripe\CMS\Controllers\ContentController;
use SilverStripe\View\Requirements;

class PageController extends ContentController
{
    public function init()
    {
        parent::init();
        Requirements::css('themes/site/css/stylesheet.scss');
        // OR search for the scss in your $themeDirs
        Requirements::themedCSS('css/stylesheet.scss');
    }
}

生成的 HTML 将自动指向 assets/_css/ 中的 处理后的 CSS 文件，而不是原始 SCSS 文件位置，例如

<link rel="stylesheet" type="text/css"  href="/assets/_css/themes-site-css-stylesheet.css?m=123456789" />

进一步文档