尝试使用webpack编译单个组件vue文件时出错，这是我得到的错误：
name：'CssSyntaxError'，原因：'不必要的花括号'，文件： 'C：\用户\ sprgu \工作区\ fieldtec \ formbird-前端\ SRC \组件\ 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 \ n \ n \ n。 FT-用户{\ n margin：0; \ n \ n} \ nbutton：first-of-type {\ n margin：0; \ n padding：0; \ n 文本转换： 无; \ N} \ n按钮：第一的型：悬停，\ n按钮：首个，类型：对焦，\ n按钮：第一的型：活性{\ n background：none; \ n outline：0; \ n} \ n \ n'，line：75，column：9，
信息： “C：\用户\ sprgu \工作区\ fieldtec \ formbird-前端\ SRC \组件\ 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 \ n \ n \ n \ n \ n \ n \ n.ft用户{\ n margin：0; \ n \ n} \ nbutton：first-of-type {\ n margin：0; \ n padding：0; \ n 文本转换： 无; \ N} \ n按钮：第一的型：悬停，\ n按钮：首个，类型：对焦，\ n按钮：第一的型：活性{\ n background：none; \ n outline：0; \ n} \ n \ n'， file：'C：\ Users \ sprgu \ Workspace \ fieldtec \ formbird-frontend \ src \ components \ User.vue' }}
这是我的webpack.config.js： 编辑：在我的webpack配置中添加了vue-loader ..
"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> About</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="" v-on:click="openAccount()"><i class="material-icons">person_pin</i> Account</a></li>
<li role="presentation" v-if="isCachingNotAllowed"><a role="menuitem" tabindex="-1" href=""><i class="material-icons">save</i> Cache</a>
<ul>
<li role="presentation" v-if="!cacheEnabled"><a role="menuitem" href="" v-on:click="enableCaching()"><i class="material-icons">cached</i> {{enableCacheText}}</a></li>
<li role="presentation" v-if="cacheEnabled"><a role="menuitem" href="" v-on:click="clearData()"><i class="material-icons">delete</i> 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> 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> 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，它应该在vue文件的单个文件组件下处理css。我该如何绕过这个错误？我在webpack配置文件中遗漏了什么吗？
答案 0 :(得分：0)
我有两种方法可以绕过这个问题：
将我的vue-loader降级到版本13.0.1或者Terry说，在我的webpack配置中添加VueLoaderPlugin！