webpack StylusやSassでurl()を含んだCSSファイルなどをimportしたときエラーが出る。resolve-url-loaderで解決。

StylusやSassでは、url() を使う際に、ベースとなるファイルからの相対パスを指定する必要があるけど、他のライブラリのStylus, Sass, CSSを読み込むとき、パスが通らずエラーが起こる。そんなときにresolve-url-loader 。

インストール。

resolve-url-loaderの使い方と注意点

webpack.config.jsでローダーを読み込む。ローダーの読み込みの順番は以下のサンプルのとーり。

注意点は、resolve-url-loader より前のローダーで soucemapが必須であること。以下のサンプルでは stylus-loader で sourceMap: true とする必要があります。でないと謎のエラーが起こってめっちゃハマる。というかめっちゃハマった。

        test: /\.(styl|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'resolve-url-loader'
          },
          {
            loader: 'stylus-loader',
            options: {
              'include css': true,
              sourceMap: true,
              sourceMapContents: false
            }
          }
        ]

また、importする側もされる側も、url() のパスはすべて「url() を書くファイル自身」からの相対パスで書く必要があります。（そもそもそれが resolve-url-loader の目的なので）