CODEWITHSUNDEEP
javascripthtmlvue.jswebpackvuetify.js
Allteran
Allteran

Reputation: 91

Vuetify - Error with vuetify.min.css running simple vuetify app

I'm trying to build frontend app using Vue, Vuetify and webpack. As package manager I'm using Yarn. I'm following steps from https://vuetifyjs.com. If I dont add vuetify styles - i'm getting simple page without any stules, but when I'm trying to add vuetify styles - i'm getting an error:

Compiled with problems: ERROR in ./node_modules/vuetify/dist/vuetify.min.css 5:2 Module parse failed: Unexpected character '@' (5:2) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | * Forged by John Leider | * Released under the MIT License. */@-webkit-keyframes v-shake{59%{margin-left:0}60%,80%{margin-left:2px}70%,90%{margin-left:-2px}}@keyframes v-shake{59%{margin-left:0}60%,80%{margin-left:2px}70%,90%{margin-left:-2px}}.v-application .black{background-color:#000!important;border-color:#000!important}.v-application .black--text{color:#000!important;caret-color:#000!important}.v-application .white{background-color:#fff!important;border-color:#fff!important}.v-application .white--text{color:#fff!important;caret-color:#fff!important}.v-application .transparent{background-color:transparent!important;border-color:transparent!important}.v-application .transparent--...

Project structure:

app
 └──src
 ├──└──api
    |  └──resource.js
    ├──pages
    |  └──App.vue
    ├──plugins
    |  └──vuetify.js
    ├──index.html
    ├──main.js
├──package.json
├──webpack.config.js
├──yarn.lock

Package.json:

  "name": "cascade-frontend",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "babel-polyfill": "^6.26.0",
    "vue": "2.6.14",
    "vue-resource": "1.5.3",
    "vuetify": "^2.6.6"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "deepmerge": "^4.2.2",
    "html-webpack-plugin": "^5.5.0",
    "sass": "~1.32",
    "sass-loader": "^13.0.0",
    "vue-cli-plugin-vuetify": "0.5.0",
    "vue-loader": "15.9.8",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.1"
  }
}

webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: path.join(__dirname, 'src', 'main.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './build')
  },
  devServer: {
    static: './dist',
    compress: true,
    port: 8100,
    allowedHosts: [
      'localhost:9000'
    ]
  },
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html')
    }),
    new VueLoaderPlugin()
  ],
  resolve: {
    modules: [
      path.join(__dirname, 'src'),
      path.join(__dirname, 'node_modules'),
    ],
  }
}

plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import "vuetify/dist/vuetify.min.css"

Vue.use(Vuetify)

const ops = {}

export default new Vuetify(ops)

pages/App.vue

<template>
<v-app>
    <v-app-bar
        elevation="9"
        outlined
        app
    >
      <v-toolbar-title>Title</v-toolbar-title>
      <v-btn text
      >
        Item 1
      </v-btn>
      <v-btn text
      >
        Item 2
      </v-btn>
      <v-btn text
      >
        Item 3
      </v-btn>

      <v-spacer></v-spacer>
      <v-btn
          text
      >
        Profile Name
      </v-btn>
      <v-btn icon href="/logout">
        <v-icon>mdi-exit-to-app</v-icon>
      </v-btn>
    </v-app-bar>
    <v-main>
      <v-container>
        <!-- <router-view></router-view> -->
      </v-container>
    </v-main>

  </v-app>
</template>

<script>
    export default {
    }
</script>

<style>

</style>

main.js

import Vue from "vue"
import 'api/resource'
import App from 'pages/App.vue'
import vuetify from 'plugins/vuetify' //this line causes trobles


new Vue({
    vuetify,
    el: "#app",
    render: a => a(App)
})

index.html

<!DOCTYPE html>
<html lang="en" html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>CASCADE</title>
</head>

<body>

    <div id="app"></div>

</body>

</html>

Upvotes: 0

Views: 1542

Answers (1)

Allteran
Allteran

Reputation: 91

I found solution by few steps:

  1. Downgrade vuetify version: ^2.6.6 -> 2.6.3
  2. Add one extra rule to webpack.config.js:
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ]
      }
  1. Remove Vuetify loading from /plugin/vuetify.js and place init code to main.js:
//main.js
import Vue from "vue"
import 'api/resource'
import App from 'pages/App.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

new Vue({
    vuetify: new Vuetify(),
    el: "#app",
    render: a => a(App)
})

You can check changes from my commit on github: https://github.com/Allteran/cascade/commit/16c2e11b556a272e9bc25c40acdf65bf852b3d31

Upvotes: 0

Related Questions