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 withcss_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 enabledextract_css: true
for any environment inconfig/webpacker.yml
.
Rails6では、webpackerが標準で装備されています。
このおかげでassets配下にあるstylesheetやjavascript、imagesをコンパイルしてくれる、いわゆるアセットパイプラインを実現してくれているんですね。
アセットパイプラインの第一の機能はアセットを連結することです。これにより、ブラウザがWebページをレンダリングするためのリクエスト数を減らすことができます。
Rails6でstylesheet_pack_tagを使うときは、assets配下でcssを使う時もしくは、webpacker.ymlに記載されているextract_cssがtrueになっている時です。
When
extract_css
istrue
, webpacker will take any imported CSS (that is, CSS that it finds inapp/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' %>
エラーの原因
最初に出てたエラーの通りだった、、
エラーログはよく見よう。