Error: "You may need an additional loader to handle the result of these loaders."

Question

I'm developing a web page with Vue.js and webpack. When I write a style in a single file component Curry.vue, the build fails.

<template>
    <div>
        
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.tomato {
    color: red;
}
</style>

The error message is：

ERROR in ./src/components/Curry.vue?vue&type=style&index=0&id=4d934a99&scoped=true&lang=css& (./node_modules/vuetify-loader/lib/loader.js??ref--7-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Curry.vue?vue&type=style&index=0&id=4d934a99&scoped=true&lang=css&) 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.
| 
| 
> .tomato {
|     color: red;
| }
 @ ./src/components/Curry.vue?vue&type=style&index=0&id=4d934a99&scoped=true&lang=css& 1:0-209 1:225-228 1:230-436 1:230-436
 @ ./src/components/Curry.vue
 @ ./src/index.js

webpack.config.js is：

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: "bundle.js",
    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: [
            ["@babel/env", {
              "targets": {
                "browsers": "last 2 chrome versions"
              }
            }]
          ]
        }
      },
      {
        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,
  }
};

Solution

You need to add a rule for css, your current scss rule doesn't apply for css.

Just add additional rule for css:

// webpack.config.js

module.exports = {
...
  module: {
    rules: [
      ...
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ]
      }
      ...
   ]
...
};

Updated on 3/31/2022

Comments

[PeterT]

doesn't seem to work. webpack complains that the rest of the code isn't proper css.

[felixmosh]

It can be that vue-style-loader is changed

[Sergey]

@PeterT I found that the test value must be changed to /\.css$/