Nothing-Works / vuetifyjs-mix-extension

https://laravel-mix.com/extensions/vuetifyjs
MIT License
57 stars 15 forks source link

Use with jetstream #18

Open vanthao03596 opened 3 years ago

vanthao03596 commented 3 years ago

Hi i'm try to use vuetify with jetstream. I tried your extension but when apply .vuetify('vuetify-loader') some css from tailwind will not work. Is there anyway to fix this ? My webpack.mix.js

const mix = require('laravel-mix');
require('vuetifyjs-mix-extension');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vuetify('vuetify-loader')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

Dep

 "devDependencies": {
        "@inertiajs/inertia": "^0.8.2",
        "@inertiajs/inertia-vue": "^0.5.4",
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        "autoprefixer": "^9.8.6",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "portal-vue": "^2.1.7",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.32.0",
        "sass-loader": "^9.0.0",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10",
        "vuetify-loader": "^1.6.0",
        "vuetifyjs-mix-extension": "^0.0.17"
    },
    "dependencies": {
        "vuetify": "^2.4.0"
    }

Screen error 1

Nothing-Works commented 3 years ago

So basically you are using two css frameworks together, I have not tried your setup but I am guessing it's something related to css class names collisions. I will try this when I have time.