错误：您可能需要额外的加载器来处理这些加载器的结果。&q；

问题描述

我正在和Vue.js和webpack一起开发一个网页。当我在单个文件组件Curry.vue中编写样式时，构建失败。

<template>
    <div>

    </div>
</template>
<script>
export default {

}
</script>
<style scoped>
.tomato {
    color: red;
}
</style>

错误消息为：

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为：

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,
  }
};

推荐答案

您需要为css添加规则，您当前的scss规则不适用于css。

只需为CSS添加其他规则：

// webpack.config.js

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

这篇关于错误：您可能需要额外的加载器来处理这些加载器的结果。&q；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！