stylesheet_packとstylesheet_linkの違いを✅

気合のタスキのおかげでMVPを完成させる事ができた〜（にんまり）

URLはこちら↓

https://preliquo.herokuapp.com/top

とりあえず動くものを作っただけなので、内装はこれから整えていきます、、

さて、今回はstylesheet_packとstylesheet_linkの違いについて学習していきたいと思います。

ここ二日間Herokuのmigrationエラーと戦っていた時に一回出現したエラー討伐ログ（RUNTEQ先輩の言葉を勝手に拝借）になります。

stylesheet_packとstylesheet_linkの違い

CSS processed by the asset pipeline gets a css_link_tag and css that is imported via a Webpacker javascript bundle is referenced with css_pack_tag.

asset pipelinesを通っている(assets配下)cssは_link_tagがつく。

一方で、javascriptの中に含まれている(javascript/packs配下)cssは_pack_tagがつくということですね。

stylesheet_pack_tag

You should use stylesheet_pack_tag if you are importing any CSS in Webpack AND if you have enabled extract_css: true for any environment in config/webpacker.yml.

Rails6では、webpackerが標準で装備されています。

このおかげでassets配下にあるstylesheetやjavascript、imagesをコンパイルしてくれる、いわゆるアセットパイプラインを実現してくれているんですね。

アセットパイプラインの第一の機能はアセットを連結することです。これにより、ブラウザがWebページをレンダリングするためのリクエスト数を減らすことができます。

Rails6でstylesheet_pack_tagを使うときは、assets配下でcssを使う時もしくは、webpacker.ymlに記載されているextract_cssがtrueになっている時です。

When extract_css is true, webpacker will take any imported CSS (that is, CSS that it finds in app/javascripts/packs/application.js via import statements) and extract it into its own “css pack” (conveniently saved in /public/packs/css/application-<hash>.css

extract_cssがtrueになっている時はimportされたcssを全てcss pack、いわゆるアセットパイプラインにpackしてくれます。

extract_css

その名の通りcssを抽出します。

extract_cssがtrueになっている場合、assets配下にcssファイルを読み込む事ができます。

stylesheet_link_tag

外部スタイルシートを指定するリンクタグを生成します。

stylesheet_link_tag "style"
# <link href="/assets/style.css" media="screen" rel="stylesheet" />

ActionView::Template::Error (Webpacker can't find hello_vue.css in /Users/subaru/Portfolio/Preliquo/public/packs/manifest.json.

production環境でアプリはどんな感じで動くかな〜と知りたかったので、下記コードをコンソールで打ちました。

bin/rails s -b 0.0.0.0 -e production --log-to-stdout

すると、こんなエラーが出てしまいました

ActionView::Template::Error (Webpacker can't find hello_vue.css in /Users/subaru/Portfolio/Preliquo/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.

エラーを解読してみます

ActionView::Template::Error (Webpacker can't find hello_vue.css in /Users/subaru/Portfolio/Preliquo/public/packs/manifest.json.

webpackerがhello_vue.cssを見つけられないと。

1. You want to set webpacker.yml value of compile to true for your environment unless you are using the `webpack -w` or the webpack-dev-server.

webpack -wかwebpack-dev-serverを使っていない場合は、webpakcer.ymlのコンパイルをtrueにする。

▼補足

webpack -w ファイル監視と再ビルド。--watch

webpack-dev-server webpackの開発サーバーの起動

2. webpack has not yet re-run to reflect updates.

webpackが再起動されていないためアップデート内容が反映されていない。

→webpackは導入済みなので、違いそう

3. You have misconfigured Webpacker's config/webpacker.yml file.

webpacker.ymlの設定をミスっている。

→ 特にいじっていないので、問題ではなさそう。

4. Your webpack configuration is not creating a manifest.Your manifest contains:


{
  "application.js": "/packs/js/application-f481c31c90c27f88ac50.js",
  "application.js.map": "/packs/js/application-f481c31c90c27f88ac50.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-f481c31c90c27f88ac50.js"
      ],
      "js.map": [
        "/packs/js/application-f481c31c90c27f88ac50.js.map"
      ]
    },
    "hello_vue": {
      "js": [
        "/packs/js/hello_vue-e14cad43b0594557e891.js"
      ],
      "js.map": [
        "/packs/js/hello_vue-e14cad43b0594557e891.js.map"
      ]
    }
  },
  "hello_vue.js": "/packs/js/hello_vue-e14cad43b0594557e891.js",
  "hello_vue.js.map": "/packs/js/hello_vue-e14cad43b0594557e891.js.map",
  "media/fonts/materialdesignicons-webfont.eot?v=6.3.95": "/packs/media/fonts/materialdesignicons-webfont-837327a8.eot",
  "media/fonts/materialdesignicons-webfont.ttf?v=6.3.95": "/packs/media/fonts/materialdesignicons-webfont-ac8d50b6.ttf",
  "media/fonts/materialdesignicons-webfont.woff2?v=6.3.95": "/packs/media/fonts/materialdesignicons-webfont-936ae473.woff2",
  "media/fonts/materialdesignicons-webfont.woff?v=6.3.95": "/packs/media/fonts/materialdesignicons-webfont-ccfe5ae5.woff",
  "media/images/Izakaya.jpeg": "/packs/media/images/Izakaya-57fd8847.jpeg",
  "media/src/img/Izakaya_4.jpeg": "/packs/media/src/img/Izakaya_4-c84e3eac6539ba0878e59b375a3cc59d.jpeg",
  "media/src/img/beer.svg": "/packs/media/src/img/beer-d2a7f1ea4582a787ecadb35ec4441046.svg",
  "media/src/img/default_profile.png": "/packs/media/src/img/default_profile-c17d58945226facbde91954efa5c8285.png",
  "media/src/img/drink.svg": "/packs/media/src/img/drink-a7c0eb0fb64186678c67a3ca6ea80911.svg",
  "media/src/img/drunkman.svg": "/packs/media/src/img/drunkman-1cbf6059072d34cec57f40dce6d36c99.svg",
  "media/src/img/liquor.svg": "/packs/media/src/img/liquor-48874885a02e0e486a8f8b9bb143adbb.svg",
  "media/src/img/sake.svg": "/packs/media/src/img/sake-d4016fd25582d9b05bc5837b53aad52c.svg"
}
):

webpackの環境環境設定がmanifestを生成してない。

→ （未）hello_vue.cssなんてもんが存在していなかった。

#誤
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

#正
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'application' %>