我正在用Vue开发一个网页.js和网页包.当我在单个文件组件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',
        ]
      }
      ...
   ]
...
};

Vue.js相关问答推荐

Nuxt 3:从注册表单发出输入值

为什么我的数组在 onBeforeMount 函数中不为空,但在 onMounted 函数中为空

保持页面重新加载之间的状态

我在表格中创建了一个包含信息的新行,但在 Cypress e2e 测试中我无法获得最后一行(新行)

在 Vuex Store 模块中使用 Vue.js 插件

Vue:根元素内容和内容分发槽

使用 Vue.js 和 Jest 进行 URL 重定向测试

使用 vue-cli 遇到无法推断解析器错误

为什么 vue 中的 @mouseover 操作不起作用

未捕获的错误:[vue-composition-api] 必须在使用任何函数之前调用 Vue.use(plugin)

使用 Vue Router 设置页面标题

将自定义部分添加到 v-autocomplete 下拉列表

NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js

Proxy代理在 Vue 3 的控制台中是什么意思?

如何使用 VueJS / Typescript 导入 JSON 文件?

使用 nuxt,如何将路由名称放在页面标题中?

在vue中单击时如何模糊元素

Axios 捕获错误请求失败,状态码 404

带有 Firebase 云消息传递的 Vue pwa 无法正常工作

Vue v-model 不响应 BS4 单选按钮组