SassError：预期换行符。 @字符集“UTF-8”； 在 Webpack 4 上使用 Sass 作为 sass-loader 构建 Vue 应用程序时

Question

我正在尝试在 Node 13 和 Webpack 4 上构建我的 Vue 应用程序。为此，我正在使用这个 webpack.config.js

const { VueLoaderPlugin } = require("vue-loader");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  mode: 'development',
  entry: {
    main: "./src/main.js",
  },
  output: {
    filename: "[name].[contenthash:12].js",
    path: path.resolve(__dirname, "dist"),
    chunkFilename: "[name].[contenthash:12].js",
  },
  module: {
    rules: [
      {
        test : /\.(jsx?)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.(eot|ttf|woff|woff2|txt)(\?\S*)?$/,
        loader: "file-loader",
        options: {
          name: "[name][contenthash:8].[ext]",
        },
      },
      {
        test: /\.(png|jpe?g|gif|webm|mp4|svg|ico)$/,
        loader: "file-loader",
        options: {
          name: "[name][contenthash:8].[ext]",
          outputPath: "assets/img",
          esModule: false,
        },
      },
      {
        test: /\.(css)$/,
        use: [
          "vue-style-loader",
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: () => [autoprefixer()],
              },
            },
          },
        ],
      },
      {
        test: /\.(s(c|a)ss)$/,
        use: [
          "vue-style-loader",
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true,
              importLoaders: 2,
              postcssOptions: {
                plugins: () => [autoprefixer()],
              },
            },
          },
          "sass-loader",
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
              implementation: require("sass"),
              sassOptions: {
                //fiber: require("fibers"),
                prependData: `@import "app/javascript/manager/styles/main.scss"`,
                //indentedSyntax: true
              }
            }
          },
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash:8].css",
      chunkFilename: "[name].[contenthash:8].css",
    }),
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
      favicon: path.resolve(__dirname, "public", "favicon.ico"),
    }),
  ],
  resolve: {
    alias: {
      vue$: "vue/dist/vue.runtime.esm.js",
    },
    extensions: ["*", ".js", ".jsx", ".css", ".scss", ".vue"],
    modules: [
      "node_modules",
    ]
  },
  optimization: {
    moduleIds: "hashed",
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -10,
          chunks: "all",
        },
      },
    },
  },
  devServer: {
    historyApiFallback: true,
  },
}

这是我的 package.json

{
  "name": "my-app-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/compiler-sfc": "^3.1.4",
    "axios": "^0.21.1",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "core-js": "^3.6.5",
    "sass-loader": "10.1.1",
    "style-loader": "^2.0.0",
    "vue": "^2.6.11",
    "vue-axios": "^3.2.4",
    "vue-router": "^3.5.2",
    "vuetify": "^2.5.6",
    "webpack-war-plugin": "^1.0.0-beta.3"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.2.0",
    "sass": "1.32.13",
    "sass-loader": "10.1.1",
    "style-loader": "^2.0.0",
    "vue-cli-plugin-vuetify": "~2.4.1",
    "vue-loader": "^16.3.0",
    "vue-template-compiler": "^2.6.14",
    "vuetify": "^2.5.6",
    "vuetify-loader": "^1.7.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

在与 sass-loader 苦苦挣扎后，我减少了错误列表，但这个很重要，我还没有找到删除它的方法：

ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ref--5-3!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
  ╷
1 │ @charset "UTF-8";
  │                 ^
  ╵

没有 sass-node，只使用了 sass。 取消对 indentedSyntax: true 的注释只会删除另一个错误，指出不允许使用分号。 升级版本将返回其他错误集。 Fibers 超出范围（据我所知，它只是改进了某些异步调用的处理）。 升级到 Webpack5 会增加很多新问题，因为 json 结构完全不同。

我在这一点上完全堆栈。 肯定还有其他东西可以处理 sass loader nut 我不是 webpack 的专家，所以它花费的时间太长了。 在这一点上，任何帮助将不胜感激。 我不敢相信没有人有同样的问题。 我看到很多相关的答案，但每个人似乎都做得很好，只是添加了缩进。 谢谢！