webpack - 如何解决语法错误：Webpack postcss 加载器不必要的大括号？

Question

尝试使用 webpack 编译 vue 文件时出现以下错误，但在编译材料设计图标时发生错误（我认为）。

[ './node_modules/css-loader!./node_modules/postcss-loader/lib!(webpack)-material-design-icons/material-design-icons.css 模块构建失败：语法错误

(4:12) 不必要的大括号

\u001b[90m 2 | \u001b[39m\u001b[90m * http://google.github.io/material-design-icons/ */\u001b[39m \u001b[90m 3 | \u001b[39m \u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 4 | \u001b[39m\u001b[36m@font-face\u001b[39m \u001b[33m{\u001b[39m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[22m\u001b[39m \u001b[90m 5 | \u001b[39m font-family\u001b[33m:\u001b[39m \u001b[32m\'Material Icons\'\u001b[39m\u001b[33m;\u001b[39m \u001b[90m 6 | \u001b[39m 字体样式\u001b[33m:\u001b[39m 普通\u001b[33m;\u001b[39m

@ (webpack)-material-design-icons/material-design-icons.css 2:14-108 @ (webpack)-material-design-icons/index.js @multi webpack-material-design-icons', '. /node_modules/vue-loader/lib??vue-loader-options!C:/Users/sprgu/Workspace/fieldtec/formbird-frontend/src/App.vue?vue&type=style&index=0&lang=less 模块解析失败：意外字符\'@\' (14:0) 你可能需要一个合适的加载器来处理这个文件类型。| | | @import \'assets/styles/main.less\'; | @ C:/Users/sprgu/Workspace/fieldtec/formbird-frontend/src/App.vue?vue&type=style&index=0&lang=less 1:0-175 1:191-194 1:196-368 1:196-368 @ C:/Users/sprgu/Workspace/fieldtec/formbird-frontend/src/App.vue@C:/Users/sprgu/Workspace/fieldtec/formbird-frontend/src/ClientApp.js@C: /Users/sprgu/Workspace/fieldtec/formbird-frontend/src/main.js' ] [ '配置 \'mode\' 选项尚未设置。将 \'mode\' 选项设置为 \'development\' 或 \'production\' 以启用此环境的默认值。' ]

这是我完整的 webpack.config 文件：

"use strict";

var webpack = require('webpack')
var path = require('path')
var extractTextPlugin = require('extract-text-webpack-plugin')
var VueLoaderPlugin = require('vue-loader/lib/plugin')

function resolve (dir) {
    return path.join(__dirname, '../../formbird-frontend/', dir)
}

module.exports = {
    entry: {
        bundle: "../../formbird-frontend/src/main.js",
        vendors: [
            "webpack-material-design-icons"
        ]
    },
    output: {
        path: path.join(__dirname, '../../formbird-frontend/dist/components'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: 'lazyload.[name].js',
        sourceMapFilename: 'sourcemaps/bundle.map'
    },
    plugins: [
        new webpack.ProvidePlugin({
            "jQuery": "jquery",
            "window.moment": "moment",
            "window.jQuery": "jquery", // the window.jQuery mapping is needed so Angular will find jQuery and use the full jQuery
                                       // rather than JQLite
            "$": "jquery",
            "window.$": "jquery"
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false,
            vue: {
                loaders: {
                    js: 'babel-loader',
                    css: extractTextPlugin.extract({
                        fallback: 'vue-style-loader',
                        use: [
                            {
                                loader: 'css-loader',
                                options: { importLoaders: 1 }
                            },
                            'postcss-loader'
                        ]
                    })
                }
            }
        }),
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src')
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    // // set modules that are server-side only to empty so they won't be loaded in the browser
    // node: {
    //     fs: "empty",

    //     // tls and net used in shared/utils/UtilBase64.js 
    //     // from 8792: Create function to convert an image from an image url to Base64 encoding
    //     tls: "empty",
    //     net: "empty"
    // },
    bail: true, // make the build fail if there is a build error. If this wasn't true the build would succeed but an error would be
                 // shown in the app when the module that doesn't exist is loaded
    module: {
        // expose the jquery object to the global window. This is needed for jquery libraries like jSignature
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            { 
                test: /(\.css$)/, 
                loaders: ['style-loader', 'css-loader', 'postcss-loader'] 
            }, 
            {
                test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/, 
                loader: "file?name=[name].[ext]"
            },
            {
                test: /\.(scss)$/,
                use: [
                    {
                        loader: 'style-loader'
                    }, 
                    {
                        loader: 'css-loader'
                    }, 
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                            }
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
}

我在这里错过了什么？请帮我。在 Google 中寻找问题时我没有任何运气。谢谢！

标签： webpackvue.jsmaterial-design