模块构建失败@content($material-light) vuetify 2.3.10

Question

我正在从vuetify版本1.0.5升级到2.3.10。根据文档，我删除了node-sass并使用了sass。我得到的错误如下。我已经包含了我的package.json文件。你知道我可能错在哪里吗？

./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/vuetify/src/styles/main.sass
Module build failed: 
    @content($material-light)
   ^
      Invalid CSS after "    @content": expected "}", was "($material-light); "
      in /Users/weather/ceolaw/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)
 @ ./node_modules/vuetify/src/styles/main.sass 2:14-102
 @ ./node_modules/vuetify/es5/presets/default/index.js

package.json文件

{
  "name": "weather",
  "private": true,
  "engines": {
    "node": "^10.0.0",
    "yarn": "^1.21.1"
  },
  "dependencies": {
    "@rails/webpacker": "^3.2.0",
    "@riophae/vue-treeselect": "^0.0.38",
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "coffee-loader": "^0.9.0",
    "coffeescript": "1.12.7",
    "es6-promise": "^4.2.2",
    "pdfjs-dist": "2.0.550",
    "sass": "^1.26.11",
    "sass-loader": "^6.0.6",
    "scroll-into-view-if-needed": "^2.2.14",
    "urijs": "^1.19.1",
    "vue": "^2.6.12",
    "vue-ads-table-tree": "^2.3.2",
    "vue-analytics": "^5.9.0",
    "vue-moment": "^4.0.0-0",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.1",
    "vue-spinner": "^1.0.3",
    "vue-star-rating": "^1.6.0",
    "vuetify": "^2.3.10",
    "yarn": "^1.22.5"
  },
  "devDependencies": {
    "caniuse-lite": "^1.0.30000855",
    "css-loader": "^0.28.11",
    "jshint": "^2.9.5",
    "jshint-loader": "^0.8.4",
    "vue-loader": "^13.6.2",
    "vue-template-compiler": "^2.6.12",
    "webpack-dev-server": "^2.9.7"
  },
  "scripts": {
    "client": "./bin/webpack-dev-server",
    "server": "bundle exec rails s",
    "start": "./bin/webpack-dev-server"
  }
}

错误更新

yarn remove node-sass

yarn remove v1.21.1
[1/2]   Removing module node-sass...
error This module isn't specified in a package.json file.

Answer 1

似乎您的另一个依赖项依赖于node-sass。它可能是@rails/webpacker，因为您使用的是非常旧的版本3.2.0 (当前是5.2.1)，并且他们切换到了sass (dart-sass) recently

结果是您已经安装了两个包- sass和node-sass

从sass-loader的docs ( Webpack在构建Vue应用时使用的)可以看出，当两个包都安装时，他们更喜欢sass而不是node-sass，但同时警告不要两个都安装。对我来说似乎很奇怪。此外，该错误还表明，在您的情况下，sass-loader优先于node-sass。

您有两个选项：

将

1. upgrade @rails/webpacker升级到更新版本，该版本使用sass
2. configure sass-loader将sass作为文档记录的here

使用