README

此捆绑包已过时，不再积极维护！如果您需要一个良好且积极维护的资产解决方案，请查看Encore Bundle。

创建您自己的 CSS & JS 组，并将它们添加到您的 contao 主题布局中。

一般功能

• 外部 CSS 后端模块
• 外部 JS 后端模块
• 向 contao 布局添加多个 CSS & JS 组
• Bootstrap 框架支持（默认为 CSS，在 JS 组中启用）
• 默认添加 Font-Awesome（所有变量和混入函数均可用）
• 可以添加优雅图标（所有变量和混入函数均可用）
• 生产模式下缓存 CSS 文件（在 contao 设置中禁用 byPassCache）

外部 CSS

功能

• 完全支持 lesscss，自动将所有 less 文件编译为外部 CSS 组中的 css
• 外部 CSS 组内的观察文件夹（递归）
• 添加多个自定义变量文件，例如覆盖 bootstrap 变量.less（如 @brand-primary）
• 在您的自定义 less 文件中使用所有 bootstrap 混入函数和变量（请参阅：https://bootstrap.ac.cn/customize/#less-variables）
• 支持 bootstrap print.css
• Internet Explorer 6-9 - 4096 css-selector 处理（Internet Explorer 6 - 9 每个文件最多只能有 4096 个 css-selector。Extassets 通过使用 https://github.com/zweilove/css_splitter 将聚合文件拆分为部分来解决此问题。）
• 所有 $GLOBALS['TL_USER_CSS'] 中的文件都将解析为外部 CSS 组

安装

Contao 4.0

1. 通过 composer 安装

composer require heimrichhannot/contao-extassets

1. 将以下行添加到您的 app/AppKernel.php 中的 $bundles 数组中

/**
     * {@inheritdoc}
     */
    public function registerBundles()
    {
        $bundles = [
            …
            new ContaoModuleBundle('extassets', $this->getRootDir()),
            new ContaoModuleBundle('haste_plus', $this->getRootDir()),
        ];

        …
    }

1. 清除应用缓存

bin/console cache:clear -e prod

钩子

addCustomAssets

将自定义字体或 CSS 库附加到 extassets 拼接器。

// config.php
$GLOBALS['TL_HOOKS']['addCustomAssets'][] = array('MyClass', 'addCustomAssetsHook');


// MyClass.php

public function addCustomAssetsHook(\Less_Parser $objLess, $arrData, \ExtAssets\ExtCssCombiner $objCombiner)
{
    // example: add custom less variables to your css group to provide acces to mixins or variables in your external css files
    $this->objLess->parseFile('/assets/components/my-library/less/my-variables.less'));
    
    // example: add custom font to your css group
    $objFile = new \File('/assets/components/my-library/css/my-font.css, true);
    $strCss = $objFile->getContent();
    $strCss = str_replace("../fonts", '/assets/components/my-library/'), $strCss); // make font path absolut, mostly required
    $this->objLess->parse($strCss);
}

Font Awesome (http://fontawesome.io/)

在您的 less 文件中直接使用 font-awesome 混入函数和变量。

// my-styles.less
.my-button{
  .fa;
  .fa-lg;
  &:before{
    content: @fa-var-github;
  }
}

所有 font-awesome 变量的列表，请参阅 (https://github.com/heimrichhannot/font-awesome/blob/master/less/variables.less).

Elegant Icon Font (http://www.elegantthemes.com/blog/resources/elegant-icon-font)

在您的 less 文件中直接使用 elegant-icon 混入函数和变量。

// my-styles.less
.my-button{
  .ei;
  &:before{
    content: @ei-var-info;
  }
}

所有 elegant-icon 变量的列表，请参阅 (https://github.com/heimrichhannot/elegant-icons/blob/master/less/variables.less).