Webpackerにyarnで入れたCSSライブラリを組み込んでコンパイルしようとすると以下のようなWarningが毎回出てきました。
09:28:18 hot.1 | WARNING in ./~/css-loader?{"minimize":false}!./~/postcss-loader/lib?{"sourceMap":true}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/app-style.scss
09:28:18 hot.1 | (Emitted value instead of an instance of Error) postcss-smart-import: /****/app/javascript/app-style.scss:1:0: Failed to find '~materialize-css/dist/css/materialize.css'
コンパイル自体は正常にできていましたが、気になったので少し調査。
CSS周りの構成はWebpackerのGithubを参考に、以下のような感じにしています。
/app/javascript/packs/application.js
import '../app-style'
import 'materialize-css/dist/js/materialize.js'
console.log('Hello World from Webpacker');
/app/javascript/app-style.scss
@import '~materialize-css/dist/css/materialize.css';
エラー内容的には、app-style.scssのimport指定がおかしいみたいですね。
いろいろ調べてると少し違う内容ですが見つけました。
@importの指定の拡張子を取り除くことでWarningが出ないようになりました。
/app/javascript/app-style.scss
@import '~materialize-css/dist/css/materialize';