How to resolve Webpack CssSyntaxError: Unnecessary curly bracket error

Question

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

name: 'CssSyntaxError', reason: 'Unnecessary curly bracket', file: 'C:\Users\sprgu\Workspace\fieldtec\formbird-frontend\src\components\User.vue', source: '\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\n\n\n\n\n.ft-user{\n margin: 0;\n\n}\nbutton:first-of-type{\n margin: 0;\n padding: 0;\n text-transform: none;\n}\nbutton:first-of-type:hover,\nbutton:first-of-type:focus,\nbutton:first-of-type:active{\n background: none;\n outline: 0;\n }\n\n', line: 75, column: 9,
message: 'C:\Users\sprgu\Workspace\fieldtec\formbird-frontend\src\components\User.vue:75:9: Unnecessary curly bracket', input: { line: 75, column: 9, source: '\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\n\n\n\n\n.ft-user{\n margin: 0;\n\n}\nbutton:first-of-type{\n margin: 0;\n padding: 0;\n text-transform: none;\n}\nbutton:first-of-type:hover,\nbutton:first-of-type:focus,\nbutton:first-of-type:active{\n background: none;\n outline: 0;\n }\n\n', file: 'C:\Users\sprgu\Workspace\fieldtec\formbird-frontend\src\components\User.vue' } }

这是我的webpack.config.js： 编辑：将 vue-loader 添加到我的 webpack 配置中..

"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>

根据vue-loader，它应该处理css下的vue文件的单文件组件。我怎样才能绕过这个错误？我是不是遗漏了我的 webpack 配置文件中的某些内容？

Answer 1

我有两种方法可以绕过这个问题：

将我的 vue-loader 降级到版本 13.0.1 或如 Terry 所说，在我的 webpack 配置中添加 VueLoaderPlugin！