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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

3145閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

1クリップ

投稿2018/05/13 23:38

編集2018/05/16 11:25

実現したいこと

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

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

scss

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

エラー内容

bash

1error in ./layouts/default.vue 2 3Module build failed: 4@import "@material/ripple/common"; 5^ 6 File to import not found or unreadable: @material/ripple/common. 7 in /Users/*****/app/node_modules/@material/button/mdc-button.scss (line 17, column 1) 8 9@ ./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 10@ ./layouts/default.vue 11@ ./.nuxt/App.js 12@ ./.nuxt/index.js 13@ ./.nuxt/client.js 14@ 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は以下の通りになります。

json

1{ 2 ... 3 "scripts": { 4 "dev": "nuxt", 5 "build": "nuxt build", 6 "start": "nuxt start", 7 "generate": "nuxt generate", 8 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 9 "precommit": "npm run lint" 10 }, 11 "dependencies": { 12 "material-components-web": "^0.35.1", 13 "nuxt": "^1.0.0" 14 }, 15 "devDependencies": { 16 "babel-eslint": "^8.2.1", 17 "eslint": "^4.15.0", 18 "eslint-friendly-formatter": "^3.0.0", 19 "eslint-loader": "^1.7.1", 20 "eslint-plugin-vue": "^4.0.0", 21 "node-sass": "^4.9.0", 22 "sass-loader": "^7.0.1" 23 } 24}

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

上の方に

javascript

1const path = require('path')

extendの所に

javascript

1 extend (config) { 2 config.module.rules.forEach(elem => { 3 if (elem.loader === 'vue-loader') { 4 elem.options.loaders.scss.forEach(elem => { 5 if (elem.loader === 'sass-loader') { 6 const addPaths = [path.resolve(__dirname, 'node_modules')] 7 elem.options.includePaths = elem.options.includePaths == Array.isArray ? [].concat(elem.options.includePaths, addPaths) : addPaths 8 } 9 }) 10 } 11 }) 12 }

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

投稿2018/06/08 05:25

isoppp

総合スコア102

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/06/08 17:34

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

2018/06/14 12:28

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問