Laravel mix compiling vuetify styles.sass to empty css file - laravel

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

Answer 1

SOLVED: davejm's sample project using vuetify-loader solved it for me! Thanks!
github.com/nekosaur/laravel-vuetify

Answer 2

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

Answer 3

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

Answer 4

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