microsoft / TypeScript-Vue-Starter

A starter template for TypeScript and Vue with a detailed README describing how to use the two together.
MIT License
4.45k stars 592 forks source link

scss not compiling #74

Open Ymx1ZQ opened 5 years ago

Ymx1ZQ commented 5 years ago
ERROR in ./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang=scss& (./node_modules/vue-loader/lib??ref--2!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang=scss&)
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'content' of undefined
    at selectBlock (C:\Users\pc\Desktop\play\essentialfootball\node_modules\vue-loader\lib\select.js:41:13)
    at Object.module.exports (C:\Users\pc\Desktop\play\essentialfootball\node_modules\vue-loader\lib\index.js:79:12)
 @ ./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang=scss& 1:0-196 1:212-215 1:217-410 1:217-410
 @ ./src/app.vue
 @ ./src/app.ts

i could not compile scss styles, but I solved by changing how the vue style loader was loaded:

      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
pbrach commented 5 years ago

Yes, I just found the same issue and solution as you. Seems like that option part is not entirely correct:


test: /\.vue$/,
loader: 'vue-loader',
options: {
    loaders: {
        'scss': 'vue-style-loader!css-loader!sass-loader',
        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
    }
}```

and this should be replaced by the code found by @Ymx1ZQ (at least for the SCSS part).

Checking the official vue-loader page I found that the `loader(s)` option is now deprecated (not sure if `loader == loaders`, or a typo? [see options-deprecation](https://vue-loader.vuejs.org/migrating.html#options-deprecation)
In any case: I can't find any documentation for the `loaders` option anymore on the official page: https://vue-loader.vuejs.org/options.html.

And it seems in the current vue-loader (V15) you need to explicitly specify the loader chain for the styles ([see loader-inference](https://vue-loader.vuejs.org/migrating.html#loader-inference))