title: How to configure webpack via vue-cli 3 to use sass
body: <p>I'm building a vue app with vue-cli 3.  I'd like to include sass files in my webpack build but the vue-cli abstracts away the <code>webpack.config.js</code> file.  Instead we are to create a <code>vue.config.js</code> file and configure it with a set of instructions.</p>
  
  <p>If I were configuring <code>webpack.config.js</code>, the following would work:</p>
  
  <pre><code>module.exports = {
    module: {
      rules: [
        // ... other rules omitted
  
        // this will apply to both plain `.scss` files
        // AND `&lt;style lang="scss"&gt;` blocks in `.vue` files
        {
          test: /\.scss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    },
    // plugin omitted
  }
  </code></pre>
  
  <p>How should I configure my <code>vue.config.js</code> to achieve the same?  Here is my best attempt:</p>
  
  <pre><code>module.exports = {
      chainWebpack: config =&gt; {
          config.module
              .rule('scss')
              .test(/\.scss$/)
              .use('vue-style-loader')
              .loader('vue-style-loader')
              .use('css-loader')
              .loader('css-loader')
              .use('sass-loader')
              .loader('sass-loader')
              .end();
      }
  };
  </code></pre>
  
  <p>This fails with the message </p>
  
  <pre><code>ERROR  TypeError: config.module.rule(...).test(...).use(...).loader(...).use is not a function
  </code></pre>