実現したいこと
私は現在、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}
お手数ですが、ご回答いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/06/08 17:34
2018/06/14 12:28