Javascript 如何解决Webpack CssSyntaxError:不必要的花括号错误

我在尝试使用webpack编译单个组件vue文件时出错，下面是我得到的错误：

名称：“CssSyntaxError”，原因：“不必要的花括号”，文件： 'C:\Users\sprgu\Workspace\fieldtec\formbird frontend\src\components\User.vue'， 资料来源： '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n 边距：0；\n\n}\n按钮：第一种类型{\n边距：0；\n填充：0；\n 文本转换： 无；\n}\n按钮：第一个类型：悬停，\n按钮：第一个类型：焦点，\n按钮：第一个类型：活动{\n 背景：无；\n大纲：0；\n}\n\n'，行：75，列：9，
信息： 'C:\Users\sprgu\Workspace\fieldtec\formbird frontend\src\components\User.vue:75:9: 不必要的花括号'，输入：{line:75， 专栏：9， 来源：'\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n 边距：0；\n\n}\n按钮：第一种类型{\n边距：0；\n填充：0；\n 文本转换： 无；\n}\n按钮：第一个类型：悬停，\n按钮：第一个类型：焦点，\n按钮：第一个类型：活动{\n 背景：无；\n大纲：0；\n}\n\n'， 文件：“C:\Users\sprgu\Workspace\fieldtec\formbird frontend\src\components\User.vue” }}

这是我的webpack.config.js： 编辑：将vue加载程序添加到我的网页包配置中

"use strict";

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: "./client/app/scripts/ClientApp.js",
    output: {
        path: __dirname + '/server/public',
        publicPath: '/',
        filename: 'scripts/bundle.js',
        chunkFilename: 'scripts/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"
        })
    ],
    resolve: {
        alias: {
            'handlebars': 'handlebars/dist/handlebars.js',
            modernizr$: path.resolve(__dirname, "./.modernizrrc")
        }
    },
    // 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$/,
                loader: 'vue-loader'
            },
            {
               test: /\.js[x]?$/,
               loader: 'babel-loader',
               exclude: [/node_modules/,  path.resolve(__dirname, "./client/app/vendor/")]
            },
            {
               test: /\.css$/,
               loader: [
                    'vue-style-loader',
                    'css-loader'
               ]
            },    
            { test: require.resolve('jquery'), loader: 'expose-loader?jQuery!expose-loader?$' },
            { test: require.resolve('moment'), loader: 'expose-loader?moment' },
            { test: /jquery-mousewheel/, loader: "imports-loader?define=>false&this=>window" },
            { test: /malihu-custom-scrollbar-plugin/, loader: "imports-loader?define=>false&this=>window" },
            { test: /TouchNSwipe/, loader: 'exports-loader?TouchNSwipe!imports-loader?jquery,mousewheel,Hammer,modernizr,TweenMax'},
            {
                test: /\.modernizrrc$/,
                loader: "modernizr-loader!json-loader"
            },
            { test: /\.json$/, loader: 'json-loader'}
        ]
    }
};

这里是User.vue

<template>
  <uiv-dropdown id="ddown1" text="Dropdown Button" class="ft-user">
    <uiv-btn type="primary">
      <div class="user-portrait">
        <!--<ft-offline-status></ft-offline-status>-->
      </div>
      <span class="name">
          <small>
              <span class="hidden-xs hidden-ms">{{user.welcomeMsg}} </span><span id="user-menu-caret" class="caret"></span>
          </small>
          <ft-account-box></ft-account-box>
      </span>
    </uiv-btn>
    <template slot="dropdown">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="" v-on:click="showAboutDialog(responder,$event)"><i class="material-icons">info</i>&nbsp; About</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="" v-on:click="openAccount()"><i class="material-icons">person_pin</i>&nbsp; Account</a></li>
      <li role="presentation" v-if="isCachingNotAllowed"><a role="menuitem" tabindex="-1" href=""><i class="material-icons">save</i>&nbsp; Cache</a>
        <ul>
          <li role="presentation" v-if="!cacheEnabled"><a role="menuitem" href="" v-on:click="enableCaching()"><i class="material-icons">cached</i>&nbsp; {{enableCacheText}}</a></li>
          <li role="presentation" v-if="cacheEnabled"><a role="menuitem" href="" v-on:click="clearData()"><i class="material-icons">delete</i>&nbsp; Clear</a></li>
          <li role="presentation" v-if="cacheEnabled"><a role="menuitem" href="" id="backupData" download="data.json" v-on:click="backupData()"><i class="material-icons">cached</i>&nbsp; Backup</a></li>
        </ul>
      </li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a id="menu-logout-option" role="menuitem" tabindex="-1" href="" v-on:click="logout()"><i class="fa fa-power-off fa-fw"></i>&nbsp; Logout</a></li>
    </template>
    <ft-about-modal v-if="showModal" @close="showModal = false">
    </ft-about-modal>
  </uiv-dropdown>
</template>


<script>
  // uiv is for Bootstrap 3 Vue components
  import {Dropdown, Btn} from 'uiv';
  import About from './About';
  import AccountBox from './AccountBox';

  export default {
    data() {
      return {
        showModal: false,
        cacheEnabled: false
      };
    },
    name: 'ft-user',
    components: {
      'uiv-dropdown': Dropdown,
      'uiv-btn': Btn,
      'ft-about-modal': About,
      'ft-account-box': AccountBox
    },
    computed: {
      user() {
        return this.$store.state.user;
      },
      enableCacheText() {
        return this.$store.enableCacheText;
      },
      isCachingNotAllowed() {
        return this.$store.isCachingNotAllowed;
      }
    },
    methods: {
      showAboutDialog: function (responder, event) {
        this.showModal = true;
        if (event) event.preventDefault();
      }
    }
  };
</script>

<style scoped>

  .ft-user{
    margin: 0;

  }
  button:first-of-type{
    margin: 0;
    padding: 0;
    text-transform: none;
  }
  button:first-of-type:hover,
  button:first-of-type:focus,
  button:first-of-type:active{
     background: none;
     outline: 0;
   }

</style>

{{user.welcomeMsg}}











//uiv用于引导3 Vue组件
从“uiv”导入{Dropdown，Btn}；
从“/关于”导入关于；
从“./AccountBox”导入AccountBox；
导出默认值{
数据（）{
返回{
showModal：错，
已启用缓存：false
};
},
名称：“ft用户”，
组成部分：{
“uiv下拉列表”：下拉列表，
“uiv btn”：btn，
“金融时报关于模态”：关于，
“金融时报账户箱”：账户箱
},
计算：{
用户（）{
返回此。$store.state.user；
},
enableCacheText（）{
返回此。$store.enableCacheText；
},
iSCachenotallowed（）{
返回此。$store.iscachinogontallowed；
}
},
方法：{
showAboutDialog：功能（响应者、事件）{
this.showModal=true；
if（event）event.preventDefault（）；
}
}
};
.ft用户{
保证金：0；
}
按钮：第一种类型{
保证金：0；
填充：0；
文本转换：无；
}
按钮：第一种类型：悬停，
按钮：第一种类型：焦点，
按钮：第一种类型：活动{
背景：无；
大纲：0；
}

---

根据，它应该在vue文件的单个文件组件下处理css。如何绕过此错误？我是否错过了网页包配置文件中的某些内容？

有两种方法可以绕过此问题：

---

将我的vue加载程序降级到13.0.1版，或者如Terry所说，在我的网页配置中添加VueLoaderPlugin

但是，您似乎没有在发布的网页包配置中使用

vue loader

。你忘了包括它了吗？@Terry oops我忘了包括它，我现在包括了它，但我仍然得到了相同的错误..：（你能更新你的问题吗？我仍然看不到正在使用

vue loader

。另外，这可能有用：，也可以参考官方文档：。你需要链接加载程序，例如

使用：['vue-style-loader'，'css loader']

或

加载程序：“vue-style-loader！css loader”

我刚刚编辑了这个问题...）这是一个暗箱操作，但是它应该在

new webpack.ProvidePlugin（{

）下列出vue loader吗？还是自动加载？