如何在 TYPO3 中包含自定义 CSS 文件答案

【问题标题】：How to include a custom CSS file in TYPO3如何在 TYPO3 中包含自定义 CSS 文件
【发布时间】：2016-11-03 09:47:18
【问题描述】：

我需要在typo3 7.6 中构建一个扩展。我在setup.txt 中包含一个css 文件

page.IncludeCSS = Ext.Path_to_css_file.css

但是我的 css 文件中的样式被其他一些自定义样式覆盖。我怎样才能防止这种情况发生。有什么想法吗？我是typo3的新手。请帮助我。提前谢谢你。

【问题讨论】：

检查您的 TS 模板包含部分。请尝试在最后包含您的扩展。
@AnuBhuvanendranNair 我的扩展模板是最后包含的。但它不起作用

标签： css typo3 typoscript typo3-7.6.x

【解决方案1】：

您必须为要包含唯一键的每个 css 文件提供一个唯一键（例如 myCssFile1）。在EXT: 之后还要使用冒号。因此，使用 TypoScript 包含 CSS 文件的正确方法是

page.includeCSS.myCssFile1 = EXT:my_ext/Path/to/css_file.css

【讨论】：

includeCSS 必须是小写的 i。我更新了答案
确保您的扩展程序已安装，路径正确且您的标识符是唯一的。然后这 100% 有效。
请告诉我们您的静态模板包含的顺序以及生成的带有 css 包含的头部 html。第三，告诉我们哪个 css 选择器覆盖了其他选择器。
你在扩展的哪个文件中添加了这个？

【解决方案2】：

"page.IncludeCSS" 错误，应该是 "page.includeCSS" 后跟您的自定义唯一数组名称，如：

page.includeCSS {
    styles=Resources/Public/Stylesheets/style.css
    form=fileadmin/css/form.css
    jqueryui=Resources/Public/Javascript/ui/jquery-ui.min.css  
}

问候皮特

【讨论】：

【解决方案3】：

另一种方法，脏但不编辑扩展模板：

lib.additionalStyles = HMENU
lib.additionalStyles {
  special = rootline
  special.range = 0|-1
  includeNotInMenu = 1
  1 = TMENU
  1.NO {
    doNotShowLink = 1
    before.cObject = FILES
    before.cObject {
      references {
        table = pages
        uid.data = field:uid
        fieldName = media
      }
      renderObj = TEXT
      renderObj {
        if.value = css
        if.equals.data = file:current:extension
        dataWrap = <link rel="stylesheet" type="text/css" href="/{file:current:publicUrl}" media="all">
      }
    }
  }
}

在这里使用 HMENU 因为 FILES 对象不能提供与通过模板方法包含相同的继承。但如果你不需要继承，你可以这样做：

lib.additionalStyles = FILES
lib.additionalStyles {
  references {
    # To use media from current page only
    table = pages
    uid.data = field:uid
    fieldName = media
    # To add some inheritance if media for current page wasn't set
    data = levelmedia: level[, slide]
    # depending on level value you can take media from root page,
    # from current page, from any level upper in tree, or first
    # existing media item starting from current page to root.
    # So you can't collect media from all parent pages, only
    # from current or one of the parents.
  }
  renderObj = TEXT
  renderObj {
    if.value = css
    if.equals.data = file:current:extension
    dataWrap = <link rel="stylesheet" type="text/css" href="/{file:current:publicUrl}" media="all">
  }
}

然后将对象导入headerData：

page.headerData.10 < lib.additionalStyles

或（如果您包含 JS）

page.footerData.10 < lib.additionalJS

现在您可以在页面设置的“资源”选项卡上创建与所需文件的关系。不确定 Typo3 的所有版本是否都允许 css 和 js 建立关系，但 6.2-8.7 允许）

【讨论】：