The starter seems to be broken at the "hello.vue" stage

[irmackenzie]

When you get to the single page component step in the starter, build does not work.

I think other issues are mentioning this, and it looks like people found solution(s), but nothing clear enough for me to copy. For example, I tried pasting in the new rule mentioned in one issue, and adding the plugin mentioned in another.

However, with a bit of googling I see that vue includes tools to get started with typescript, so maybe that's a better option than trying this tutorial...

>npm run build

ERROR in ./src/components/Hello.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./src/components/Hello.vue?vue&type=style&index=0&lang=css&) 36:0
Module parse failed: Unexpected token (36:0)
You may need an appropriate loader to handle this file type.
| 
| 
> .greeting {
|     font-size: 20px;
| }
 @ ./src/components/Hello.vue?vue&type=style&index=0&lang=css& 1:0-128 1:144-147 1:149-274 1:149-274
 @ ./src/components/Hello.vue
 @ ./src/index.ts

[MrDach]

Not sure this is the best way to fix it, but I got it running by doing the following:

1. Run npm install -D sass-loader node-sass
2. Add the following code inside the rules array in webpack.config. { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] }
3. Add lang=scss to the style element in Hello.vue <style lang="scss"> .greeting { font-size: 20px; } </style>
4. Run the build again.

[kueiapp]

maybe adding css-loader and vue-style-loader only can pass the issue

[treylykins]

The dependency versions in my package.json were way off (this tutorial is 2+ years old). To get it to work as-is, I cleared my "node_modules" directory (using "rm -rf node_modules" or equivalent recursive command), copied the package.json from the source files provided on github, and re-ran "npm install."

I wouldn't accept this solution for real projects, but that's how I got back on track with the tutorial.

[upupming]

47