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

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

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

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

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

2回答

1659閲覧

Vue.js Vuetifyをインストールするとコンパイルエラーが発生する

frntta

総合スコア5

Vue.js

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

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2019/11/11 11:33

編集2019/11/11 12:55

前提・実現したいこと

エラーの解消・Vuetifyを使用したい。

発生している問題・エラーメッセージ

in ./node_modules/vuetify/src/components/VIcon/VIcon.sass Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'indentedSyntax'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate (~/プロジェクト名/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11) at Object.loader (~/プロジェクト名/node_modules/sass-loader/dist/index.js:36:28)

各種バージョン

vue CLI 3.5.0
vue 2.6.10
sass-loader 8.0.0

packagejson

{ "name": "name", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" }, "dependencies": { "axios": "^0.19.0", "core-js": "^2.6.5", "vue": "^2.6.10", "vue-router": "^3.0.3", "vuetify": "^2.1.0", "vuex": "^3.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.8.0", "@vue/cli-plugin-eslint": "^3.8.0", "@vue/cli-plugin-unit-jest": "^3.8.0", "@vue/cli-service": "^3.8.0", "@vue/eslint-config-airbnb": "^4.0.0", "@vue/test-utils": "1.0.0-beta.29", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.0.1", "babel-jest": "^23.6.0", "eslint": "^5.16.0", "eslint-config-prettier": "^6.0.0", "eslint-plugin-prettier": "^3.1.0", "eslint-plugin-vue": "^5.0.0", "node-sass": "^4.13.0", "prettier": "^1.18.2", "sass": "^1.19.0", "sass-loader": "^8.0.0", "vue-cli-plugin-vuetify": "^2.0.2", "vue-template-compiler": "^2.6.10", "vuetify-loader": "^1.3.0" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/airbnb" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions" ], "jest": { "moduleFileExtensions": [ "js", "jsx", "json", "vue" ], "transform": { "^.+\.vue$": "vue-jest", ".+\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", "^.+\.jsx?$": "babel-jest" }, "transformIgnorePatterns": [ "/node_modules/" ], "moduleNameMapper": { "^@/(.*)$": "<rootDir>/src/$1" }, "snapshotSerializers": [ "jest-serializer-vue" ], "testMatch": [ "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)" ], "testURL": "http://localhost/", "watchPlugins": [ "jest-watch-typeahead/filename", "jest-watch-typeahead/testname" ] } }

vue.config.js

module.exports = { css: { loaderOptions: { sass: { data: "@import '@/assets/scss/style.scss';", }, }, }, transpileDependencies: [ 'vuetify', ], };

何が根本的な原因になるでしょうか??

ご教授のほどお願い致します。

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

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

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

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

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

aaharu

2019/11/11 12:34

ビルドを実行してエラーが出たのだと思いますが、ビルドの実行方法、設定ファイル(vue.config.js)やpackage.jsonの記述がないと原因探しづらいのかなと思いました。
frntta

2019/11/11 12:56

ありがとうございます!追加いたしました。 いかがでしょうか・・?
frntta

2019/11/11 13:45

sassをダウングレードして解決しました。
guest

回答2

0

自己解決

sassダウングレードにて解決

投稿2019/11/11 13:46

frntta

総合スコア5

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

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

aaharu

2019/11/11 13:50

``` "node-sass": "^4.13.0", "sass": "^1.19.0", ``` package.jsonを拝見したのですが、node-sassとdart-sass(sass)の両方が入っているのもよくなさそうです。 個人的にはnode-sassを消して、node + fibersの組み合わせでよいかと思います。
guest

0

js

1 css: { 2 loaderOptions: { 3 sass: { 4 data: "@import '@/assets/scss/style.scss';", 5 }, 6 }, 7 },

この記述によって、Sassファイルに、 @import '@/assets/scss/style.scss'; というSCSSファイルのimportを追加しているため、エラーになっている気がします。

投稿2019/11/11 13:01

aaharu

総合スコア441

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

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

frntta

2019/11/11 13:29

ご回答ありがとうございます! こちら試しにコメントアウトしてみましたが、結果変わらずでした。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問