Vue.js app, how to build less/sass?

Question

Sass

Hello. I'm starting to understand Vue.js, I'm stuck on connecting the processing of .scss / .less files. The project is a template pig installed through the console.
The moment with the assembly is not entirely clear: do I write everything in .sass / .less according to the classics, then I include the minified file, or do I write my own styles in each .vue component, and do one common with imports?
The project has webpack out of the box (3.6.0).
From the off documentation, I tried to connect the handler in this way:

{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
          }
        }
      }

Effect - 0.
Explain pliz, what's the problem?

Answer 1

Try like this:

{
  test: /\.vue$/,
  loader: 'vue-loader',
},
{
  test: /\.scss$/,
  loaders: [ "style-loader", "css-loader", "sass-loader" ]
},

And then importing the styles into the component:

<style lang="scss">
  @import "./main";
</style>

My advice, use vue-cli if you haven't already.