Posted at

Rails 5.1.1のWebpackerでnode_modules内のCSSライブラリ使用時のWarning

More than 1 year has passed since last update.

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指定がおかしいみたいですね。

いろいろ調べてると少し違う内容ですが見つけました。

https://github.com/rails/webpacker/issues/461

@importの指定の拡張子を取り除くことでWarningが出ないようになりました。


/app/javascript/app-style.scss

@import '~materialize-css/dist/css/materialize';