Laravel mix compiling vuetify styles.sass to empty css file

Question

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 */

curiousyigit · Accepted Answer · 2019-08-30 07:31:06Z

2

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

github.com/nekosaur/laravel-vuetify

answered Aug 30, 2019 at 7:31

curiousyigit

491 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Filipe Cruz · Accepted Answer · 2021-02-17 18:25:43Z

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(),
    ]
};

I've searched for 2 full days for a solution and this is the only solution that seems to work for my project! Many thanks!

davejm · Accepted Answer · 2019-07-27 08:33:59Z

-1

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

answered Jul 27, 2019 at 8:33

davejm

1

2 Comments

curiousyigit Over a year ago

Nope.. still same

davejm Over a year ago

This works - sample laravel project using vuetify-loader : github.com/nekosaur/laravel-vuetify

Rodrigo Sauceda · Accepted Answer · 2020-04-29 01:01:02Z

-1

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

edited Apr 29, 2020 at 1:01

answered Mar 20, 2020 at 22:37

Rodrigo Sauceda

11 silver badge4 bronze badges

Collectives™ on Stack Overflow

Laravel mix compiling vuetify styles.sass to empty css file

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Related