VueJS (с Vuetify) может потребоваться дополнительный загрузчик для области действия css - PullRequest
0 голосов
/ 20 апреля 2020

Когда я пытаюсь использовать веб-пакет для компиляции моего 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' }])
  ]
}

Я часами смотрел на это и пытался выяснить, не мог ли я неправильно использовать загрузчики или неправильно их настроить в веб-пакете?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...