vue.js - 定位 npm 生产构建问题的根源 (Vue.js/Laravel-mix)

Question

我无法再完成生产构建 - 我收到以下形式的错误消息：

CssSyntaxError: D:\bruce\Documents\web\vietnam\dist\app.css:11653:22: Unknown word

其他unknown word已发布的 -type 错误解决方案主要关注样式块中的错误字符，因此我从 .vue 文件中删除了所有样式块并阻止加载 Vuetify。问题仍然存在。

我无法确定该位置存在什么角色，11653:22因为app.css不存在！

开发版本运行良好。

我的 vue.config.js 文件是：

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  runtimeCompiler: true,  
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin(),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ],
    css: {
      loaderOptions: {
        sass: {
          data: `@import "~@/sass/main.scss"`,
        },
      },
    },

    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "sass-loader",
          options: {
              implementation: require("sass"),
              fiber: require('fibers')
          }
        },
        process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
        "css-loader",
        "sass-loader"
      ]
    },
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    },
  ],
  },
};

我的 webpack.mix.js（生产）是：

let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'dist/').sass('resources/sass/app.scss', 'dist/');

我的节点版本是 12.13.0，npm 版本是 6.13.0。Webpack 版本 4.41.2 和 webpack-cli 版本 3.3.10 正在使用中。

我不确定接下来要尝试什么来确定我的错误根源。

标签： vue.jswebpacklaravel-mix