查找npm生产构建问题的来源(Vue.js / Laravel-mix)

时间:2019-11-12 03:15:38

标签: vue.js webpack laravel-mix

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

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

针对unknown word型错误的其他已发布解决方案都集中在样式块中的错误字符上,因此我从.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。

我不确定下一步该怎么确定我的错误来源。

0 个答案:

没有答案