title: Error: "You may need an additional loader to handle the result of these loaders."
body: <p>I'm developing a web page with Vue.js and webpack. When I write a style in a single file component <code>Curry.vue</code>, the build fails.</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      
  }
  &lt;/script&gt;
  &lt;style scoped&gt;
  .tomato {
      color: red;
  }
  &lt;/style&gt;
  </code></pre>
  <p>The error message is：</p>
  <pre><code>ERROR in ./src/components/Curry.vue?vue&amp;type=style&amp;index=0&amp;id=4d934a99&amp;scoped=true&amp;lang=css&amp; (./node_modules/vuetify-loader/lib/loader.js??ref--7-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Curry.vue?vue&amp;type=style&amp;index=0&amp;id=4d934a99&amp;scoped=true&amp;lang=css&amp;) 12:0
  Module parse failed: Unexpected token (12:0)
  File was processed with these loaders:
   * ./node_modules/vuetify-loader/lib/loader.js
   * ./node_modules/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | 
  | 
  &gt; .tomato {
  |     color: red;
  | }
   @ ./src/components/Curry.vue?vue&amp;type=style&amp;index=0&amp;id=4d934a99&amp;scoped=true&amp;lang=css&amp; 1:0-209 1:225-228 1:230-436 1:230-436
   @ ./src/components/Curry.vue
   @ ./src/index.js
  </code></pre>
  <p><code>webpack.config.js</code> is：</p>
  <pre><code>const path = require('path');
  
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const VueLoaderPlugin = require('vue-loader/lib/plugin')
  const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
  
  module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src', 'index'),
    watch: true,
    output: {
      path: path.join(__dirname, 'dist'),
      publicPath: '/dist/',
      filename: &quot;bundle.js&quot;,
      chunkFilename: '[name].js'
    },
    plugins:[
      new HtmlWebpackPlugin({
        template: './src/index.html'
      }),
      new VueLoaderPlugin(),
      new VuetifyLoaderPlugin()
    ],
    module: {
      rules: [
        {
          test:/\.vue$/,
          use:['vue-loader']
        },
        {
          test: /.jsx?$/,
          include: [
            path.resolve(__dirname, 'src')
          ],
          exclude: [
            path.resolve(__dirname, 'node_modules')
          ],
          loader: 'babel-loader',
          query: {
            presets: [
              [&quot;@babel/env&quot;, {
                &quot;targets&quot;: {
                  &quot;browsers&quot;: &quot;last 2 chrome versions&quot;
                }
              }]
            ]
          }
        },
        {
          test: /\.s(c|a)ss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              // Requires sass-loader@^7.0.0
              options: {
                implementation: require('sass'),
                fiber: require('fibers'),
                indentedSyntax: true // optional
              },
              // Requires sass-loader@^8.0.0
              options: {
                implementation: require('sass'),
                sassOptions: {
                  fiber: require('fibers'),
                  indentedSyntax: true // optional
                },
              },
            },
          ],
        },
      ]
    },
    resolve: {
      extensions: ['.json', '.js', '.jsx', '.vue'],
      alias:{
        '@': path.resolve('src'),
      }
    },
    devtool: 'source-map',
    devServer: {
      contentBase: path.join(__dirname, '/dist/'),
      inline: true,
      host: 'localhost',
      port: 8080,
    }
  };
  </code></pre>