モジュール内のscssファイルをimportする場合にパスが通らず。設定が知りたいです。

Question

nuxtでsassを使いたくドキュメントを参考にしながら設定を行いました。

yarn add -D sass sass-loader@^7.3.1 fibers

slickgrid-es6というモジュールを使っていてその中のscssを使いたく.vueの中に以下のように書きました。

<style lang="scss">
@import "~slickgrid-es6/dist/slick.grid.variables.scss";
@import "~slickgrid-es6/dist/slick.grid.scss";
@import "~slickgrid-es6/dist/slick-default-theme.scss";
</style>

すると以下のようなエラーが出力されました。

These relative modules were not found:                                                              friendly-errors 23:57:27
                                                                                                    friendly-errors 23:57:27
* ../images/collapse.gif in ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/abc.vue?vue&type=style&index=0&lang=scss&
:

よくわからなかったので、モジュールのscssファイルをローカルにコピーし、検証したところ以下のところで引っかかっているようでした。下記を削除すると正しく動作します。

  .slick-sort-indicator-desc {
    background: url('../images/sort-desc.png');
  }

  .slick-sort-indicator-asc {
    background: url('../images/sort-asc.png');
  }

つまり../images/のパスが認識されてないのかなと推測しているのですが、モジュール内のscssをそのままインポートした場合において、其れにパスを通す場合、他にも何か設定が必要なのではないかと思っています。
それをnuxtにおいてどのように設定すればいいか教えていただけないでしょうか。

よろしくお願いします。

なお対象モジュールのフォルダ構成は以下のようになっていて画像ファイル自体は存在してることを確認しています。

node_modules
+ slickgrid
  + dist
    + slick.grid.variables.scss
    + slick.grid.scss
    + slick-default-theme.scss
  + images
    + sort_asc.gif    ←　対象の画像は存在する。
    + sort_desc.gif    ←　対象の画像は存在する。

Comments

[Zuishin]

画像はそれを表示する html からの相対パスを書かなければいけません。

[tomomo]

モジュールにscssファイルが含まれていることは結構ある訳で、それを@import ...した際、その相対パスを適切に変換してくれる設定があるのではと思ったのです。
なければそれら一式を自身のプロジェクトに置くなりで自ら変換しなければならないですが、nuxt.config.tsの設定とかで何かやり方ないかなと。
多分buildの項目とか。

[Zuishin]

画像は scss とは関係ないので、scss の位置を基準にするのは適切ではないでしょう。コンパイル後の css を html と同じディレクトリに出力すればいいのでは？

Answer 1

解決しました。
標準で組み込まれるwebpackの設定に対し、やはり追加のオプションが必要のようでした。
nuxt.config.tsに以下のようにbuildオプションを追加したところパス問題が解決され動きました。

// 
:
  build: {
    loaders: {
      css: {
        url: false
      }
    }
  }