Webpack: SCSS/SASS support seems to be broken

[mpbarlow]

As soon as I change the style block of the supplied App.vue file to <style lang="scss">, the dev script becomes unable to compile the component. The error it outputs is:

ERROR  Failed to compile with 1 errors                                                                                                                                                             

This dependency was not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../node_modules/vue-loader/lib/style-compiler/index?{"id":"data-v-415752d4","scoped":false,"hasInlineConfig":false}!sass-loader?{"indentedSyntax":true,"sourceMap":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue in ./src/App.vue

This happens on a brand new project, with no other changes than to run npm install and to switch the lang property to scss or sass. I tried trashing the project and starting again from scratch to no avail. vue-style-loader appears to be installed, and I've had a poke around the various webpack configs looking for anything out of the ordinary, but all seems fine. To be perfectly honest, I don't have much experience with webpack yet, so I don't really know what I'm looking for anyway.

I've previously been using the webpack-simple template and had no issues with that. Just in case: npm version: 4.5.0, node version: 7.9.0.

[mpbarlow]

Nevermind, for some reason I assumed it came with Sass support built in. For anyone else with the same question: npm install --save-dev node-sass sass-loader

[LinusBorg]

It's supported insofar as webpack is proceonfigured to handle it as well as less, postcss, stylus, but we don't install all of those loaders by default.

[maxisacoder]

@mpbarlow @LinusBorg what is the reason to assume that pre-configured sass supporting, why just put it into devDependency to avoid confusion for users. People who use template may be even not familiar with webpack and sass-loader.

[LinusBorg]

what is the reason to assume that pre-configured sass supporting
This it's documented here for everyone to know

why just put it into devDependency to avoid confusion for users.

as I said, we don't want to install unnecessary dependencies.

People who use template may be even not familiar with webpack and sass-loader.

1. This template has extensive docs, users should read them.
2. This template is not a framerwork that aims to keep you from learning webpack. It's only a starting point to set up projects quickly.

[samburgers]

this would be a great thing to add in the Readme, or even as an option to install during the cli setup if possible?