2023-01-17 15:59:39
贖罪
webpack, webpcker周りが苦手すぎたので、なるべく関わりたくないと思っていたが、そうも行かなかったです。
死ぬ
@rails/webpackerは、wbpackとは似てるけどまあまあちがって、別物でなんたらloaderのフルセットとなっているわけだと。 この事実さえ把握していればいいです。 @rails/webapckerで依存関係にないloaderをloadする必要があったり、定義が不足していたりする場合に、新しく設定を追加すればよい。
そんで、cssは、とりあえずimport xxxxできるので、疲れたときはそれで対処する
多分、ごにょごにょしたほうがいいんだろうが、動くことを期待する
webpackerつかっているときに本番環境でcssがloadされない問題を解決する
状況
node_modules/react-image-crop/dist/ReactCrop.cssが存在する
staging, 本番環境にてこのcssが読み込まれていない
推察
- webpackerでloadの対象になっていない?
- webpackerの設定を変更したため?
- local開発環境では再現しないが、設定によっては再現する
再現した設定
const css = {
test: /\.css$/,
use: [
"css-loader",
],
}
を設定する
わかっていないこと
- まず、デフォルトの状態で、loadされない理由
- 実際は、どこにある何をloadしているのか
- 対象のファイルは、どこに生成されるのか --debug-webpacker
段階的に解消する
Does not resolve @import. Module parse failed: Unexpected character '@' · Issue #344 · webpack-contrib/sass-loader · GitHub include: /node_modules/,
をつけると、下記のエラーが出る
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import url('~react-image-crop/dist/ReactCrop.css');
dir to pathにしてみる
include: '/node_modules/react-image-crop/dist/',
新しいエラーが出る
ERROR in ./node_modules/react-image-crop/dist/ReactCrop.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
これによると、現在使っているloaderがふさわしくないとのことだが、実際どうなの?
use: [
"style-loader",
"css-loader",
],
次
require('react-image-crop/dist/ReactCrop.css');
にしたら、'@'のエラーが消えた
ERROR in ./node_modules/react-image-crop/dist/ReactCrop.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
は残るということで、include自体はしようとしていることになる
loader: "style-loader!css-loader"
は同じエラーとなる
次、順番を変える
less-loaderappendの前にしてみるが変わらず
とりあえず、てきせつなloader が使われていないことが原因
use, loaders, loader: [ ] の違いは?
同じ結果になる?
一旦無視
css-loaderについて
とりあえずdocumentの通りにする
test: /\.css$/i, include: '/node_modules/', use: ["style-loader", "css-loader"],
エラー消えず
url云々
ReactCrop.cssのurl使用した記述を消してみる
変わらず
実はsass?
use: ["style-loader", "css-loader", "sass-loader"],
変わらず
issueで調べる
webpacker, webpackで
Module parse failed: Unexpected token cssを調べる
esm-loaderのせいかなとも思ったので変えてみる
babel-loaderをpackage.jsonから消したが変わらず
一旦変更をリセット
import 'react-image-crop/dist/ReactCrop.css'して見る
stagingにデプロイしてどうなるか
すまん、力尽き之助。
