Drupal8でCSS

kanazilla's picture

初心者です。 Drupal8の環境を構築したはいいもののCSSの設定方法が分かりません。モジュールのCSS Injectorは7までしか対応していないようで、他にどういう方法をとればいいでしょうか。ちなみにテーマはBootstrapで、スタイルを上書きしていきたいと思っています。

Comments

blauerberg's picture

https://www.drupal.org/theme-guide/8/assets あたりを読みましょう。

kanazilla's picture

お世話になります。
ありがとうございます、教えて頂いたURLやその他を調べたところ、サブテーマを用いてCSSを変更していけば良いと理解しました。
ZENというテーマに変更し、更にZENのサブテーマを作成、適用させるところまでは出来たのですが、画面は真っ白になってしまいます。
エラー表示として、

Template "@my_zen_sub/containers/article/article.twig" is not defined (Drupal\Core\Template\Loader\ThemeRegistryLoader: Unable to find template "@my_zen_sub/containers/article/article.twig" in the Drupal theme registry.) in "themes/my_zen_sub/templates/content/node.html.twig" at line 1.
Template "@my_zen_sub/base/root/base-root.twig" is not defined (Drupal\Core\Template\Loader\ThemeRegistryLoader: Unable to find template "@my_zen_sub/base/root/base-root.twig" in the Drupal theme registry.) in "themes/my_zen_sub/templates/layout/html.html.twig" at line 1.

と記述されています。
どう修正すればエラーがなくなり正常に表示されるようになるのでしょうか・・・
たびたび恐縮ですがどうぞご指導よろしくお願いいたします。

Shumpei's picture

my_zen_subテーマ内にテンプレートファイルが見つからないというエラーです。my_zen_subテーマと同じフォルダに、ベースとなるzenテーマはきちんと保存されていますでしょうか?サブテーマを作成する場合には、そのベースとなるテーマも存在している必要があります。*日本語でご質問の場合には、Drupal Japan User Groupもございます。https://groups.drupal.org/japan

Some twig files are not defined. Do you have the base theme in the same folder of your sub theme?

kanazilla's picture

ご返答ありがとうございます。おかげさまで解決できました。ご助言頂きありがとうございました。
いざコンテンツページを作ろうとしましたら、以下のエラーが表示されてしまいます。
The website encountered an unexpected error. Please try again later.

このエラーが表示されるのは「コンテンツ追加」で記事、もしくは基本ページを押下した場合のみです。

心当たりがありましたらご教授頂けますと幸いです。

kanazilla's picture

自己解決しました。どうも追加で入れたモジュールが原因だった様です。

Personally then I think you

dscoop's picture

Personally then I think you have done a good job, using related design and Drupal 8. Good inspiration! :) Does it also exist in English?

サブテーマの info.yml

blauerberg's picture

サブテーマの info.yml ファイルを添付してください。

kanazilla's picture

有難うございます。
サブテーマであるmy_zen_subのinfo.yml、
my_zen_sub.info.ymlの内容を添付します。

以下コピー&ペースト

name: my_zen_sub
description: my_zen_sub
screenshot: screenshot.png

This theme is compatible with Drupal 8 core. And it is a sub-theme of Zen.

core: 8.x

type: theme

Classy vs. Stable as a base theme: https://www.lullabot.com/articles/a-tale-of-two-base-themes-in-drupal-8-...

Zen uses classy as its base theme.

base theme: zen

This section controls the libraries for your theme. For full documentation,

see https://www.drupal.org/node/2216195

The "libraries-override:" section will allow you to:

- Replace an entire library.

- Remove an entire library.

- Replace an asset in a library with another asset.

- Remove an asset from a library.

libraries-override:
core/normalize: false
system/base:
css:
component:
css/components/clearfix.module.css: false
classy/base:
css:
component:
css/components/breadcrumb.css: false
css/components/button.css: false
css/components/more-link.css: false
css/components/pager.css: false
css/components/tabs.css: false

The "libraries-extend:" section will allow you to add your own JS or CSS to

existing libraries.

libraries-extend:

The "libraries:" section will add a library to all pages.

libraries:
- my_zen_sub/base
# @TODO Remove these libraries and use attach_library() for all component styles.
- my_zen_sub/box
- my_zen_sub/comment
- my_zen_sub/header
- my_zen_sub/hidden
- my_zen_sub/inline-links
- my_zen_sub/inline-sibling
- my_zen_sub/print-none
- my_zen_sub/responsive-video
- my_zen_sub/wireframe
- my_zen_sub/autocomplete
- my_zen_sub/collapsible-fieldset
- my_zen_sub/form-item
- my_zen_sub/form-table
- my_zen_sub/progress-bar
- my_zen_sub/progress-throbber
- my_zen_sub/resizable-textarea
- my_zen_sub/table-drag
- my_zen_sub/nav-menu
- my_zen_sub/navbar
- my_zen_sub/pager

This section is used by the contrib module, Component Libraries. It allows you

to reference .twig files in your sass/ directory by using the Twig namespace:

@my_zen_sub

component-libraries:
my_zen_sub:
paths:
- components
- templates

This section lists the regions defined in Zen's default page.html.twig and

maintenance-page.html.twig files. The name before the semi-colon is the

machine name of the region. The text after the semi-colon is the region's

description used on the admin/structure/block page.

#

In the page.html.twig, the contents of the region are output with a

{{page.MACHINE_NAME}} variable. For example, with these lines in the .info.yml

file:

regions:

header_top: Header top

You'll use this variable in page.html.twig:

{{ page.header_top }}

regions:
header: Header
primary_menu: Primary menu
secondary_menu: Secondary menu
highlighted: Highlighted
breadcrumb: Breadcrumb
title: Title
help: Help
content: Content
sidebar_first: First sidebar
sidebar_second : Second sidebar
footer: Footer
bottom: Page bottom
# The page_top and page_bottom regions are hidden, which means they will not
# show up on the block layout page. But they are required in order for the
# html.html.twig to work properly, so do not delete them.
page_top: 'Page top'
page_bottom: 'Page bottom'

Information added by Drupal.org packaging script on 2016-06-02

version: '8.x-7.0-alpha14'
core: '8.x'
project: 'zen'
datestamp: 1464881363

です。
どこか設定漏れやミスがあるのでしょうか。
何度もお手数おかけしますがよろしくお願いいたします。

Please reply in English

dscoop's picture

Please reply in English

Translated Thank you for your

kanazilla's picture

Translated

Thank you for your help.
Thank you , were examined who taught URL or other , we understand that it is good if we change the CSS by using the sub- theme .
Change to the theme of ZEN, further create a sub- theme of the ZEN, but I was able to far to be applied , the screen will become a pure white .
As an error display ,

Template "@my_zen_sub/containers/article/article.twig" is not defined (Drupal\Core\Template\Loader\ThemeRegistryLoader: Unable to find template "@my_zen_sub/containers/article/article.twig" in the Drupal theme registry.) in "themes/my_zen_sub/templates/content/node.html.twig" at line 1.
Template "@my_zen_sub/base/root/base-root.twig" is not defined (Drupal\Core\Template\Loader\ThemeRegistryLoader: Unable to find template "@my_zen_sub/base/root/base-root.twig" in the Drupal theme registry.) in "themes/my_zen_sub/templates/layout/html.html.twig" at line 1.

It has been described as .
What happens to the error is displayed correctly eliminated if the fix ...
It is often excuse me, thank you guidance please .

コードを貼るときは

blauerberg's picture

コードを貼るときは preタグで囲んでください、見づらいので。。

Shumpeiさんも書いてくれていますが、サブテーマのtemplatesディレクトリの下にtwigテンプレートファイルがないのが原因です。

"Create a Zen 8.x-7.x sub-theme - Manually." の通りに作成していますか?
https://www.drupal.org/node/2767991

kanazilla's picture

ありがとうございました、助言を頂いたおかげで解決できました。
また、preタグの件もご教授いただきありがとうございます。これから気を付けます。

I cannot read the above. What

frob's picture

I cannot read the above. What got me here was this line "@my_zen_sub/base/root/base-root.twig" which was solved for me by using the components module.

Sorry if this post is not wanted or necessary.