VueJS (w/ Vuetify)可能需要额外的加载器用于限定作用域的css

Question

当我尝试使用webpack来编译我的VueJS代码时(特别是这样)：

<template>
  <v-app-bar app color="blue" flat height="100px">
    <v-img
      class="mx-2"
      contain
      max-height="80"
      max-width="80"
      :src="require('@/assets/images/logos/marble-dark-logo.png').default"
      alt="logo"
    ></v-img>
    <v-toolbar-title class="ml-4"><h2>Marble</h2></v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn outlined x-large>
      Sign In
    </v-btn>
    <v-btn class="ml-5" dark color="#363f44" x-large depressed>
      Contact Us
    </v-btn>
  </v-app-bar>
</template>
<script>
export default {
  name: 'Navbar',
  data: () => ({}),
  methods: {}
}
</script>
<style scoped>
.logo {
  border-radius: 10px;
}
</style>

我得到了这个错误

Module parse failed: Unexpected token (29: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.
|
|
> .logo {
|   border-radius: 10px;
| }
 @ ./src/components/Navbar.vue?vue&type=style&index=0&id=41458b80&scoped=true&lang=css& 1:0-211 1:227-230 1:232-440 1:232-440
 @ ./src/components/Navbar.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js

这是我的webpack.config.js和package.json

{
  "name": "landing",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server --open --hot --config ./build/webpack.config.js",
    "build": "webpack --mode production --progress --hide-modules --config ./build/webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.5.2",
    "deepmerge": "^4.2.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-html": "^6.0.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.2.2",
    "fibers": "^4.0.2",
    "file-loader": "^6.0.0",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.4",
    "vue-loader": "^15.9.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.4.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vuetify": "^2.2.22"
  }
}

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                fiber: require('fibers'),
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ]
   },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
      '@': path.resolve('src')
    },
    extensions: ["*", ".js", ".vue", ".json"]
  },
  plugins: [
    new VueLoaderPlugin(),
    new VuetifyLoaderPlugin(),
    new CopyPlugin([{ from: './public' }])
  ]
}

我已经看了几个小时了，试着看看我是不是误用了加载器，或者在webpack中错误地设置了加载器？

Answer 1

我也有同样的问题，移除默认的css加载器并替换它为我解决了这个问题。我使用的是Rails环境，所以我的配置看起来有点不同，但下面是相关的代码片段：

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
environment.loaders.delete('css')
environment.loaders.append('css', {
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
});