質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • Vue.js

    585questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • webpack

    210questions

  • Nuxt.js

    36questions

Nuxt.jsでMaterial Components Webを使うときに、Sassファイルを読み込めない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 349

kaede_sato

score 16

 実現したいこと

私は現在、Nuxt.jsで静的サイトを作成しています。デザインフレームワークにMaterial Components Webを使おうと思いnpmでインストールしたのですが、.scssファイルを取り込む方法が分かりません。

以下のようにインポートした場合、mdc-button.scssは読み込めているのですが、mdc-button.scssが依存しているripple/common.scssを読み込むことができません。

@import "~@material/button/mdc-button";

 エラー内容

error in ./layouts/default.vue

Module build failed: 
@import "@material/ripple/common";
^
     File to import not found or unreadable: @material/ripple/common.
     in /Users/*****/app/node_modules/@material/button/mdc-button.scss (line 17, column 1)

@ ./node_modules/vue-style-loader?{"sourceMap":true}!./node_modules/css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"/Users/*****/app/assets","/static":"/Users/*****/app/static"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-314f53c6","scoped":false,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./layouts/default.vue 4:14-531 13:3-17:5 14:22-539
@ ./layouts/default.vue
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 試したこと

こちらに書かれていることはひと通り試しました:How to include path in sass-loader? · Issue #864 · nuxt/nuxt.js

 補足情報

package.jsonは以下の通りになります。

{
  ...
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "material-components-web": "^0.35.1",
    "nuxt": "^1.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1"
  }
}

お手数ですが、ご回答いただければ幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

nuxtのwebpack内のvue-loaderの中のsass-loaderにincludePathsを設定する必要がありそうです。

nuxt.config.jsに下記を設定すると動作しました。
とはいえ、貼られているgithubに近しい内容のため解決には繋がらないかもしれません。

上の方に

const path = require('path')

extendの所に

    extend (config) {
      config.module.rules.forEach(elem => {
        if (elem.loader === 'vue-loader') {
          elem.options.loaders.scss.forEach(elem => {
            if (elem.loader === 'sass-loader') {
              const addPaths = [path.resolve(__dirname, 'node_modules')]
              elem.options.includePaths = elem.options.includePaths == Array.isArray ? [].concat(elem.options.includePaths, addPaths) : addPaths
            }
          })
        }
      })
    }

かなり汚いコードの回答になっておりますので、サンプル程度に捉えて頂ければと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/09 02:34

    ご回答ありがとうございます。無事動作しました!

    キャンセル

  • 2018/06/14 21:28

    無事動作したようでよかったです!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Vue.js

    585questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • webpack

    210questions

  • Nuxt.js

    36questions