CODEWITHSUNDEEP
laravelvue.jssassvuetify.jslaravel-mix
curiousyigit
curiousyigit

Reputation: 49

Laravel mix compiling vuetify styles.sass to empty css file

I'm trying to compile vuetify 2.0.0-beta.9 SASS using laravel mix. The output of the styles.sass is an empty css file. How can I fix this?

As per the documentation (), First I ran:

$ npm install sass sass-loader fibers deepmerge --dev

Then created a main.scss file in resources/sass. Which contains the following:

@import '~vuetify/src/styles/main.sass';
@import '~vuetify/src/styles/styles.sass';

$body-font-family: 'Amiri', serif;

This produces a css file that seems incomplete because the styling of the site goes crazy while works fine if I just link a CDN or import a compiled one from ~vuetify/dist/vuetify.css

I need to compile it myself rather than just importing from ~vuetify/dist/vuetify.css because I want to change the $body-font-family variable.

To test, I first commented the styles.sass,

@import '~vuetify/src/styles/main.sass';
//@import '~vuetify/src/styles/styles.sass';

//$body-font-family: 'Amiri', serif;

This confirmed that main.sass is being compiled. So next, I tried:

//@import '~vuetify/src/styles/main.sass';
@import '~vuetify/src/styles/styles.sass';

//$body-font-family: 'Amiri', serif;

Which output a file with only the following:

/** Ripples */

/** Elements */

Upvotes: 2

Views: 2791

Answers (4)

Filipe Cruz
Filipe Cruz

Reputation: 119

After many issues, I solve this on Laravel 8.

// Dependencies
{
        "laravel-mix": "^6.0.6",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10",
        "vuetify": "^2.4.3",
        "vuetify-loader": "^1.7.1",
}

// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss"'
    })
})
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/gift.js', 'public/js')
    .vue()
    .sass('resources/sass/pages/home.scss', 'public/css')
    .sass('resources/sass/pages/gift.scss', 'public/css')
    .webpackConfig(Object.assign(webpack))
    .copyDirectory('resources/images/', 'public/images');

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

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};

Upvotes: 2

Rodrigo Sauceda
Rodrigo Sauceda

Reputation: 1

This solution worked for me correctly, but you must have sass-loader 7, 8 is not compatible.

Upvotes: -1

curiousyigit
curiousyigit

Reputation: 49

SOLVED: davejm's sample project using vuetify-loader solved it for me! Thanks!

github.com/nekosaur/laravel-vuetify

Upvotes: 2

davejm
davejm

Reputation: 1

did you ever work this out? I'm in the same situation but Veutify is production version 2 (out of beta now).

Upvotes: -1

Related Questions