该主题有效，但未应用任何CSS。即使在Firefox的开发人员控制台中，它似乎也没有链接到页面。我已经通过Firefox中的开发者控制台手动应用了CSS，只是为了确认它是否有效。
为清楚起见，在对主题文件进行任何更改以及重新加载网页后，我已经清除了缓存。我也尝试了不同的基本主题，但仍然得到相同的结果。该主题已安装为默认主题，除了CSS以外，它似乎也可以正常使用，因为该页面上项目的块布局是正确的。
我觉得问题与将CSS链接到页面有关，但是我已经尝试了从重命名文件到完全删除自定义CSS的所有操作，到目前为止没有任何操作。
我的目录结构如下：
- themes
- learn
learn.info.yml
learn.libraries.yml
- css
style.css
- templates
html.html.twig
page.html.twig
下面是我对每个文件的代码。
learn.info.yml
name: learn
type: theme
Description: "A theme to learn on"
package: custom
core: 8.x
libraries:
- 'learn/global-css'
base theme: stable
regions:
headline: headline
header: header
content: content
sidebar_top: sidebar_top
sidebar_bottom: sidebar_bottom
footer: Footer
learn.libraries.yml
#libraries file: learn.libraries.yml
global-css:
css:
theme:
css/style.css: {}
style.css
#headline {
grid-area: headline;
align-self: center;
}
#topbar {
grid-area: header;
}
#main {
grid-area: main;
}
#sidebar-top {
grid-area: sidebar-top;
}
#sidebar-bottom {
grid-area: sidebar-bottom;
}
#footer {
grid-area: footer;
}
.container {
font-family: Georgia, sans-serif;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
". headline headline ."
"header header header header"
"main main main sidebar-top"
"main main main sidebar-bottom"
"footer footer footer footer";
}
page.html.twig
<div id="headline">
{{ page.headline }}
</div>
<div id="topbar">
{{ page.header }}
</div>
<div id="main">
{{ page.content }}
</div>
<div id="sidebar-top">
{{ page.sidebar_top}}
</div>
<div id="sidebar-bottom">
{{ page.sidebar_bottom}}
</div>
<footer id="footer">
<hr>
{{ page.footer }}
</footer>
html.html.twig
<head>
{{ head_title }}
</head>
<body>
{{ page_top }}
{{ page }}
{{ page_bottom }}
</body
网页的源代码：
<script type="application/vnd.drupal-ajax" data-big-pipe-event="start"></script>
<script type="application/vnd.drupal-ajax" data-big-pipe-event="stop"></script>
</body><head>
</head>
<body>
<div id="toolbar-administration" role="group" aria-label="Site administration toolbar" class="toolbar">
<nav id="toolbar-bar" role="navigation" aria-label="Toolbar items" class="toolbar-bar clearfix">
<h2 class="visually-hidden">Toolbar items</h2>
<div class="home-toolbar-tab toolbar-tab">
<a href="/" title="Return to site content" class="toolbar-icon toolbar-icon-escape-admin toolbar-item" data-toolbar-escape-admin>Back to site</a>
<div><nav class="toolbar-lining clearfix" role="navigation"></nav></div> </div>
<div class="toolbar-tab">
<a href="/admin" title="Admin menu" class="toolbar-icon toolbar-icon-menu trigger toolbar-item" data-drupal-subtrees="" id="toolbar-item-administration" data-toolbar-tray="toolbar-item-administration-tray" aria-owns="toolbar-item-administration-tray" role="button" aria-pressed="false">Manage</a>
<div id="toolbar-item-administration-tray" data-toolbar-tray="toolbar-item-administration-tray" class="toolbar-tray"><nav class="toolbar-lining clearfix" role="navigation" aria-label="Administration menu"><h3 class="toolbar-tray-name visually-hidden">Administration menu</h3><div class="toolbar-menu-administration"><ul class="toolbar-menu"><li class="menu-item menu-item--collapsed"><a href="/admin/content" title="Find and manage content." id="toolbar-link-system-admin_content" class="toolbar-icon toolbar-icon-system-admin-content" data-drupal-link-system-path="admin/content">Content</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/structure" title="Administer blocks, content types, menus, etc." id="toolbar-link-system-admin_structure" class="toolbar-icon toolbar-icon-system-admin-structure" data-drupal-link-system-path="admin/structure">Structure</a></li><li class="menu-item"><a href="/admin/appearance" title="Select and configure themes." id="toolbar-link-system-themes_page" class="toolbar-icon toolbar-icon-system-themes-page" data-drupal-link-system-path="admin/appearance">Appearance</a></li><li class="menu-item"><a href="/admin/modules" title="Add and enable modules to extend site functionality." id="toolbar-link-system-modules_list" class="toolbar-icon toolbar-icon-system-modules-list" data-drupal-link-system-path="admin/modules">Extend</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/config" title="Administer settings." id="toolbar-link-system-admin_config" class="toolbar-icon toolbar-icon-system-admin-config" data-drupal-link-system-path="admin/config">Configuration</a></li><li class="menu-item"><a href="/admin/people" title="Manage user accounts, roles, and permissions." id="toolbar-link-entity-user-collection" class="toolbar-icon toolbar-icon-entity-user-collection" data-drupal-link-system-path="admin/people">People</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/reports" title="View reports, updates, and errors." id="toolbar-link-system-admin_reports" class="toolbar-icon toolbar-icon-system-admin-reports" data-drupal-link-system-path="admin/reports">Reports</a></li><li class="menu-item"><a href="/admin/help" title="Reference for usage, configuration, and modules." id="toolbar-link-help-main" class="toolbar-icon toolbar-icon-help-main" data-drupal-link-system-path="admin/help">Help</a></li></ul></div></nav></div> </div>
<div class="toolbar-tab">
<a href="/admin/config/user-interface/shortcut" title="Shortcuts" class="toolbar-icon toolbar-icon-shortcut trigger toolbar-item" id="toolbar-item-shortcuts" data-toolbar-tray="toolbar-item-shortcuts-tray" aria-owns="toolbar-item-shortcuts-tray" role="button" aria-pressed="false">Shortcuts</a>
<div id="toolbar-item-shortcuts-tray" data-toolbar-tray="toolbar-item-shortcuts-tray" class="toolbar-tray"><nav class="toolbar-lining clearfix" role="navigation" aria-label="User-defined shortcuts"><h3 class="toolbar-tray-name visually-hidden">User-defined shortcuts</h3><ul class="toolbar-menu"><li><a href="/node/add">Add content</a></li><li><a href="/admin/content">All content</a></li></ul><a href="/admin/config/user-interface/shortcut/manage/default/customize" class="edit-shortcuts">Edit shortcuts</a></nav></div> </div>
<div class="hidden contextual-toolbar-tab toolbar-tab">
<button class="toolbar-icon toolbar-icon-edit toolbar-item" aria-pressed="false" type="button">Edit</button>
<div><nav class="toolbar-lining clearfix" role="navigation"></nav></div> </div>
<div class="tour-toolbar-tab hidden toolbar-tab" id="toolbar-tab-tour">
<button class="toolbar-icon toolbar-icon-help toolbar-item" aria-pressed="false" type="button">Tour</button>
<div><nav class="toolbar-lining clearfix" role="navigation"></nav></div> </div>
<div class="toolbar-tab">
<a href="/user" title="My account" class="toolbar-icon toolbar-icon-user trigger toolbar-item" id="toolbar-item-user" data-toolbar-tray="toolbar-item-user-tray" aria-owns="toolbar-item-user-tray" role="button" aria-pressed="false"><span data-big-pipe-placeholder-id="callback=user.toolbar_link_builder%3ArenderDisplayName&&token=-MH2NzEnTzbzMk0ZGfGgoiw7G3j_-Q1ILWBRVhIOKLI"></span></a>
<div id="toolbar-item-user-tray" data-toolbar-tray="toolbar-item-user-tray" class="toolbar-tray"><nav class="toolbar-lining clearfix" role="navigation" aria-label="User account actions"><h3 class="toolbar-tray-name visually-hidden">User account actions</h3><span data-big-pipe-placeholder-id="callback=user.toolbar_link_builder%3ArenderToolbarLinks&&token=xssKdKFVFD7N0FUPPcC1C7LrqMHpQFVzUhrI4cOeEgs"></span></nav></div> </div>
</nav>
</div>
<div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas>
<div class="container">
<div id="headline">
<div class="region region-headline">
<div id="block-learn-branding" class="contextual-region block block-system block-system-branding-block">
<div data-contextual-id="block:block=learn_branding:langcode=en"></div>
<a href="/" title="Home" rel="home" class="site-logo">
<img src="/themes/learn/logo.svg" alt="Home" />
</a>
<div class="site-name">
<a href="/" title="Home" rel="home">Testing</a>
</div>
</div>
<div id="block-learn-page-title" class="contextual-region block block-core block-page-title-block">
<div data-contextual-id="block:block=learn_page_title:langcode=en"></div>
<h1 class="js-quickedit-page-title page-title">Welcome to Testing</h1>
</div>
</div>
</div>
<div id="topbar">
<div class="region region-header">
<nav role="navigation" aria-labelledby="block-learn-main-menu-menu" id="block-learn-main-menu" class="contextual-region block block-menu navigation menu--main">
<h2 class="visually-hidden" id="block-learn-main-menu-menu">Main navigation</h2>
<div data-contextual-id="block:block=learn_main_menu:langcode=en|menu:menu=main:langcode=en"></div>
<ul class="menu">
<li class="menu-item">
<a href="/" data-drupal-link-system-path="<front>">Home</a>
</li>
<li class="menu-item">
<a href="/help" data-drupal-link-system-path="node/2">help</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="main">
<div class="region region-content">
<div id="block-learn-content" class="block block-system block-system-main-block">
<div class="views-element-container contextual-region"><div class="contextual-region view view-frontpage view-id-frontpage view-display-id-page_1 js-view-dom-id-f8689dcf3daa7451b89b435b7b92fa14a06712a07116849e050187e0b48ed7e5">
<div data-contextual-id="entity.view.edit_form:view=frontpage:location=page&name=frontpage&display_id=page_1&langcode=en"></div>
<div class="view-empty">
No front page content has been created yet.<br />Follow the <a target="_blank" href="https://www.drupal.org/docs/user_guide/en/index.html">User Guide</a> to start building your site.<ul class="links"><li><a href="/node/add">Add content</a></li></ul>
</div>
<div class="feed-icons">
<a href="http://dtheme.dd:8083/rss.xml" class="feed-icon">
Subscribe to
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sidebar-top">
<div class="region region-sidebar-top">
<div class="search-block-form contextual-region block block-search container-inline" data-drupal-selector="search-block-form" id="block-learn-search" role="search">
<h2>Search</h2>
<div data-contextual-id="block:block=learn_search:langcode=en"></div>
<form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8">
<div class="js-form-item form-item js-form-type-search form-type-search js-form-item-keys form-item-keys form-no-label">
<label for="edit-keys" class="visually-hidden">Search</label>
<input title="Enter the terms you wish to search for." data-drupal-selector="edit-keys" type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search" />
</div>
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit" type="submit" id="edit-submit" value="Search" class="button js-form-submit form-submit" />
</div>
</form>
</div>
<div class="views-element-container contextual-region block block-views block-views-blockposts-block-1" id="block-views-block-posts-block-1">
<h2>Posts</h2>
<div data-contextual-id="block:block=views_block__posts_block_1:langcode=en|entity.view.edit_form:view=posts:location=block&name=posts&display_id=block_1&langcode=en"></div>
<div><div class="contextual-region view view-posts view-id-posts view-display-id-block_1 js-view-dom-id-356becb689640db1e1b061ec9a73f60e2f550bd53a175c6111a64f9caa3d1be2">
<div data-contextual-id="entity.view.edit_form:view=posts:location=block&name=posts&display_id=block_1&langcode=en"></div>
<div class="view-content">
<div class="item-list">
<ul>
<li>
<article data-history-node-id="2" data-quickedit-entity-id="node/2" role="article" class="contextual-region node node--type-page node--view-mode-teaser" about="/help" typeof="schema:WebPage">
<h2>
<a href="/help" rel="bookmark"><span property="schema:name" data-quickedit-field-id="node/2/title/en/teaser" class="field field--name-title field--type-string field--label-hidden">help</span>
</a>
</h2>
<div data-contextual-id="node:node=2:changed=1533146323&langcode=en"></div> <span property="schema:name" content="help" class="rdf-meta hidden"></span>
<div class="node__content">
<div property="schema:text" data-quickedit-field-id="node/2/body/en/teaser" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>This theme isnt working...</p></div>
<div class="node__links">
<ul class="links inline"><li class="node-readmore"><a href="/help" rel="tag" title="help" hreflang="en">Read more<span class="visually-hidden"> about help</span></a></li></ul> </div>
</div>
</article>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sidebar-bottom">
<div class="region region-sidebar-bottom">
<span data-big-pipe-placeholder-id="callback=Drupal%5CCore%5CRender%5CElement%5CStatusMessages%3A%3ArenderMessages&args%5B0%5D&token=_HAdUpwWmet0TOTe2PSiJuMntExoshbm1kh2wQzzzAA"></span>
<nav role="navigation" aria-labelledby="block-learn-tools-menu" id="block-learn-tools" class="contextual-region block block-menu navigation menu--tools">
<h2 id="block-learn-tools-menu">Tools</h2>
<div data-contextual-id="block:block=learn_tools:langcode=en|menu:menu=tools:langcode=en"></div>
<ul class="menu">
<li class="menu-item">
<a href="/node/add" data-drupal-link-system-path="node/add">Add content</a>
</li>
</ul>
</nav>
<nav role="navigation" aria-labelledby="block-learn-account-menu-menu" id="block-learn-account-menu" class="contextual-region block block-menu navigation menu--account">
<h2 class="visually-hidden" id="block-learn-account-menu-menu">User account menu</h2>
<div data-contextual-id="block:block=learn_account_menu:langcode=en|menu:menu=account:langcode=en"></div>
<ul class="menu">
<li class="menu-item">
<a href="/user" data-drupal-link-system-path="user">My account</a>
</li>
<li class="menu-item">
<a href="/user/logout" data-drupal-link-system-path="user/logout">Log out</a>
</li>
</ul>
</nav>
</div>
</div>
<footer id="footer">
<hr>
<div class="region region-footer">
<nav role="navigation" aria-labelledby="block-learn-footer-menu" id="block-learn-footer" class="contextual-region block block-menu navigation menu--footer">
<h2 class="visually-hidden" id="block-learn-footer-menu">Footer menu</h2>
<div data-contextual-id="block:block=learn_footer:langcode=en|menu:menu=footer:langcode=en"></div>
<ul class="menu">
<li class="menu-item">
<a href="/contact" data-drupal-link-system-path="contact">Contact</a>
</li>
</ul>
</nav>
</div>
</footer>
</div>
</div>
</body>
很抱歉，这个时间太长了，只是想更详尽些。
编辑：
虽然答案是是正确的，但我只是想确保澄清一下
<css-placeholder token="{{ placeholder_token|raw }}">
是解决CSS链接问题的确切行。
答案 0 :(得分：1)
在您的library.yml中，您有css/custom.css: {}，
但文件名为style.css
在“ learn.libraries.yml”文件中将css/custom.css: {}更改为css/style.css: {}。
编辑：
您需要在html.html.twig中包含{{ page_top }}和{{ page_bottom }}。这些包括脚本标签之类的东西。
例如：
<body>
<head>
</head>
{{ page_top }}
<div id="page" class="container">
{{ page }}
</div>
{{ page_bottom }}
</body>
而且，您可能应该将<div id="page" class="container">移至页面模板
编辑2。
当您使用“稳定”作为基本主题时，查找问题根源的最简单方法是复制“稳定”主题模板，然后根据需要进行编辑。
查看下面发布的“稳定”主题html.html.twig，您还丢失了一些其他可能需要的东西。
需要特别注意的是css-placeholder标记，看来与您的情况特别相关。
稳定主题html.html.twig看起来像这样：
<!DOCTYPE html>
<html{{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token|raw }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token|raw }}">
<js-placeholder token="{{ placeholder_token|raw }}">
</head>
<body{{ attributes }}>
{#
Keyboard navigation/accessibility link to main content section in
page.html.twig.
#}
<a href="#main-content" class="visually-hidden focusable">
{{ 'Skip to main content'|t }}
</a>
{{ page_top }}
{{ page }}
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token|raw }}">
</body>
</html>