web-dev-qa-db-ja.com

カスタムモジュールにCSSライブラリを含めるにはどうすればよいですか？

YAMM！3 CSSライブラリを自分のDrupal 8サイトに含めたいと思っています。そのために、 この回答 の指示に従ってカスタムモジュールを作成しました。答えはphpライブラリに関するものですが、CSSライブラリでも機能すると思いました。

これは、私のカスタムモジュールのcomposer.jsonです。

{
  "name": "drupal/my_yamm3",
  "type": "drupal-module",
  "require": {
    "geedmo/yamm3": "*"
  }
}

私のDrupalコードベースのルートにあるcomposer.jsonには、これがあります：

"extra": {
    ...
    "merge-plugin": {
        "include": [
            "core/composer.json",
            "modules/custom/my_yamm3/composer.json"
        ],
    ...

私はこのコマンドでコードベースを更新しました：

$ composer update
$ composer dumpauto

そして、私は作曲家の出力でこの行に気づきました：

> Drupal\Core\Composer\Composer::vendorTestCodeCleanup
  - Installing geedmo/yamm3 (1.1.0): Loading from cache

これはファイルシステムの検査によって確認されます：

$ ls vendor/geedmo/yamm3/
bower.json  composer.json  demo/  gulpfile.js  index.html  LICENSE.txt  package.json  README.md  yamm/

サイトでmy_yamm3モジュールを有効にし、admin/config/development/performanceでcss集計を無効にしました。

しかし、ページをロードすると、ブラウザーのネットワークタブにyammライブラリーがロードされていません。

正しい方法を使用してサードパーティのcssライブラリをロードしていますか？何が悪いのですか？

[〜＃〜] edit [〜＃〜]osmanが私の環境の状態の確認を求めました。私のdrupalプロジェクトルートには、/composer.jsonとディレクトリ/drush/と/vendor/がありますが、/scripts/もありません/web/。これは、drupal-composer/drupal-projectプロジェクトを使用していないことを意味します。

composer.jsonへの彼の推奨される追加について、これは私が持っていたものです：

"extra": {
    "installer-paths": {
        "core": ["type:drupal-core"],
        "modules/contrib/{$name}": ["type:drupal-module"],
        "profiles/contrib/{$name}": ["type:drupal-profile"],
        "themes/contrib/{$name}": ["type:drupal-theme"],
        "drush/contrib/{$name}": ["type:drupal-drush"],
        "modules/custom/{$name}": ["type:drupal-custom-module"],
        "themes/custom/{$name}": ["type:drupal-custom-theme"]
    }
},

つまり、composerプロジェクトがないのですか？

8composertheming
4
user1359

基礎

CSSライブラリをDrupalインストールにバインドするには、*。libraries.yamlファイルを介して定義および公開する必要があります。

たとえば（コアの上品なテーマから取得）：

book-navigation:
  version: VERSION
  css:
    component:
      css/components/book-navigation.css: {}

は、book-navigationというライブラリがあり、ページに含まれるとcss/components/book-navigation.css cssファイルを配信することを定義しています。

サードパーティのCSSライブラリでcomposerを使用する

Composerは、OPでの作業を開始した方法でmerge-pluginを使用して、PHP依存関係に対して簡単かつ確実に機能します。ただし、CSSライブラリーとJavaScriptライブラリーは、特に前処理または構築ステップが必要な場合は別の話です。これは未解決の未解決の問題であり（私の知る限り、現在のところ）、この問題を読んで、どのような問題が発生しているかを知ることができます。

主な問題は、ライブラリをcomposer依存関係としてインポートすると、ライブラリがvendorディレクトリのどこにでもインストールされることですあります。そのため、使用するCSS/JSファイルへのファイルパスについて、* libraries.yamlファイル内の多くを想定することはできません。

代替（A）composerなし：CDNの使用/外部でホストされるライブラリ定義

あなたの場合のために、あなたはこのファイルを含めたいと考えました：

https://raw.githubusercontent.com/geedmo/yamm3/master/yamm/yamm.css

* libraries.yamlファイル内で外部的にホストされるライブラリとして定義することができます（ ＃external を参照）：

my_module.yamm3:
  remote:  https://raw.githubusercontent.com/geedmo/yamm3/master/yamm/yamm.css
  version: VERSION
  license:
    name: MIT
    url: https://github.com/geedmo/yamm3/blob/master/LICENSE.txt
    gpl-compatible: true
  css:
    theme:
      https://raw.githubusercontent.com/geedmo/yamm3/master/yamm/yamm.css : { type: external }

注：このアプローチでは、常に最新のyamm.cssバージョンを提供する必要があります。

代替（B）作曲家なし：ローカルコピーを独自のモジュールのフォルダーに保存する

CSSファイルをモジュールのフォルダー内に配置すると、 css/yamm.css、*。libraries.yamlファイルで次のyaml定義を使用できるようになります。

my_module.yamm3:
  version: VERSION
  css:
    theme:
      css/yamm.css : {}

ページへのライブラリのアタッチ

最後に、ライブラリの定義が完了したら、ライブラリの使用を開始できます。

これは広範囲に文書化されています（ https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8- module ）そして私はあなたがまだ読んでいないならそれを読むことを勧めます。

幸運を！

2
Stefanos Petrakis

Drupal 8では、ベンダーディレクトリのファイルを使用するライブラリを簡単に設定する方法はありません。これを回避するために、私は Vendor Stream Wrapper module を作成しました。これは、vendor：//ストリームラッパーを作成し、webrootの外部にある場合でも、vendorフォルダー内のファイルにリンクできるようにします。

1
Jaypan

vendorディレクトリがWebルートの外にある可能性があります。確認してもらえますか？

たまたまdrupal-composer/drupal-projectプロジェクトを使用すると、次のようなフォルダ構造になります。

/composer.json
/drush/
/scripts/
/vendor/
/web/
/web/core/
/web/libraries/
/web/modules/
/web/profiles/
/web/sites/
/web/themes/
...

librariesフォルダーは、 YAMM！3 CSS ライブラリーを配置する必要があるフォルダーです。これにより、Webからもアクセスできるようになります。

私のcomposer.jsonファイルには、Drupal extra.installer-pathsで定義された特定のフォルダがあります。

...
"extra": {
    "installer-paths": {
        "web/core": ["type:drupal-core"],
        "web/libraries/{$name}": ["type:drupal-library"],
        "web/modules/contrib/{$name}": ["type:drupal-module"],
        "web/profiles/contrib/{$name}": ["type:drupal-profile"],
        "web/themes/contrib/{$name}": ["type:drupal-theme"],
        "drush/contrib/{$name}": ["type:drupal-drush"]
    }
}

composer/installersパッケージとextraの構成を使用して、composerで必要な各パッケージは、専用のフォルダーにコピーされます。したがって、 librariesフォルダ。

https://github.com/drupal-composer/drupal-project でコードとドキュメントを確認してください。

必要なものをサポートするためにプロジェクトを更新するための詳細がすべて提供されているはずです。それ以外の場合はさらに戻ってきます:)

1
osman