错误重现
项目名称是blog01，项目目录结构如下：

blog01
│
├─src
│ ├─App.vue
│ ├─home.vue
│ ├─main.js
│ └─router.js
│
├─.babelrc
├─index.template.html
├─package.json
└─webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
App.vue

1 2 3 4 5 6 7 8 9 home.vue 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 main.js

import Vue from ‘vue’
import App from ‘./App.vue’
import VueRouter from ‘vue-router’
import routes from ‘./router’
import VueSuperagent from ‘vue-superagent’
import ‘babel-polyfill’;

Vue.use(VueRouter);
Vue.use(VueSuperagent);

const router = new VueRouter({
mode: ‘history’,
routes
})

new Vue({
el: ‘#app’,
router,
render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
router.js

import Home from ‘./home.vue’

export default [{
path:’/’,
component:Home
}]
1
2
3
4
5
6
.babelrc

{
“presets”: [
[“latest”, {
“es2015”: { “modules”: false }
}]
]
}
1
2
3
4
5
6
7
index.template.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 package.json

{
“name”: “blog01”,
“description”: “CSDN blog01”,
“version”: “1.0.0”,
“author”: “”,
“private”: true,
“scripts”: {
“dev”: “cross-env NODE_ENV=development webpack-dev-server --open --hot”,
“build”: “rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules”
},
“dependencies”: {
“babel-polyfill”: “^6.23.0”,
“vue”: “^2.2.1”,
“vue-router”: “^2.3.0”,
“vue-superagent”: “^1.2.0”
},
“devDependencies”: {
“babel-core”: “^6.0.0”,
“babel-loader”: “^6.0.0”,
“babel-preset-latest”: “^6.0.0”,
“cross-env”: “^3.0.0”,
“css-loader”: “^0.25.0”,
“file-loader”: “^0.9.0”,
“html-webpack-plugin”: “^2.28.0”,
“node-sass”: “^4.5.0”,
“rimraf”: “^2.6.1”,
“sass-loader”: “^5.0.1”,
“url-loader”: “^0.5.8”,
“vue-loader”: “^11.1.4”,
“vue-template-compiler”: “^2.2.1”,
“webpack”: “^2.2.0”,
“webpack-dev-server”: “^2.2.0”
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
webpack.config.js

var path = require(‘path’)
var webpack = require(‘webpack’)
const HTMLPlugin = require(‘html-webpack-plugin’)

module.exports = {
entry: {
app: [’./src/main.js’],
// 把共用的库放到vendor.js里
vendor: [
‘babel-polyfill’,
‘vue’,
‘vue-router’,
‘vuex’
]
},
output: {
path: path.resolve(__dirname, ‘./dist’),

// 因为用到了 html-webpack-plugin 处理HTML文件。处理后的HTML文件都放到了
// dist文件夹里。html文件里面js的相对路径应该从使用 html-webpack-plugin 前
// 的'/dist/' 改成 '/'
publicPath: '/',
// publicPath: '/dist/',
filename: '[name].[hash].js'
// filename:'build.js'

},
module: {
rules: [
{
test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 569: … } }̲, { …/,
loader: ‘babel-loader’,
exclude: /node_modules/
},
// font loader
{
test: /.(ttf|eot|woff|svg)KaTeX parse error: Expected 'EOF', got '}' at position 40: …-loader' }̲, // 图片处理…/,
loader: ‘url-loader’,
options: {
limit: ‘1000’,
name: ‘[name].[ext]?[hash]’
},
//sass,less配置
{
test: /.sassKaTeX parse error: Expected 'EOF', got '}' at position 220: … ] }̲, { …/,
loader: “style-loader!css-loader!less-loader”
}
}
]
},
plugins:[
// 把共用的库放到vendor.js里
new webpack.optimize.CommonsChunkPlugin({name: ‘vendor’}),
// 编译HTML。目的：在生产环境下，为了避免浏览器缓存，需要文件按照哈希值重命名。
// 这里编译可以自动更改每次编译后引用的js名称。
new HTMLPlugin({template: ‘index.template.html’})
],
resolve: {
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: ‘#eval-source-map’
}

if (process.env.NODE_ENV === ‘production’) {
module.exports.devtool = ‘#source-map’
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
‘process.env’: {
NODE_ENV: ‘“production”’
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
解决方法
这个问题涉及到 sass 和 scss 的区别。sass 的语法规则是一种缩进语法。而 scss 语法与 css 语法相近，使用大括号。上面那个例子中，home.vue 文件中的 style 标签，lang 属性设置成了 sass，代码如下：

<style lang="sass" rel="stylesheet/scss" scoped>

1
然而 style 标签里面的内容是scss，这导致了编译器报错。所以为了解决这个问题，需要把上面的代码改成如下形式：

<style lang="scss" rel="stylesheet/scss" scoped>

2
lang 属性变成 scss，所有关于语法的地方都设置成 scss，这样问题就解决了。