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

Question

前提・実現したいこと

エラーの解消・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',
  ],
};

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

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

Comments

[aaharu]

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

[frntta]

ありがとうございます！追加いたしました。
いかがでしょうか・・？

[frntta]

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

Answer 1

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

Comments

[aaharu]

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

Answer 2

  css: {
    loaderOptions: {
      sass: {
        data: "@import '@/assets/scss/style.scss';",
      },
    },
  },

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

Comments

[frntta]

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