Webpack, Mix and Vuetify loader : SassError: Expected newline

Question

I use Vuetify loader in my Laravel project but compilation doesn't work.

Laravel : 8.46 Vue : 2.6.14 Vuetify : 2.5.3

This is my package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "deepmerge": "^4.2.2",
        "laravel-mix": "^6.0.6",
        "path": "^0.12.7",
        "postcss": "^8.1.14",
        "sass": "^1.34.1",
        "sass-loader": "^12.1.0",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.14",
        "vuetify": "^2.5.3",
        "vuetify-loader": "^1.7.2"
    }
}

My webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

mix.webpackConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js/')
        }
    },
    module: {
        rules: [
            {
                test: /\.s(c|a)ss$/,
                use: [
                    "sass-loader",
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass'),
                            sassOptions: {
                                indentedSyntax: true
                            },
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new VuetifyLoaderPlugin()
    ],
});

mix.js('resources/js/app.js', 'public/js')
    .vue()
    //.extract(['vue'])
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

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

My entry :

require('./bootstrap');

import Vue from 'vue'
import vuetify from '@/plugins/vuetify'

new Vue({
    vuetify,
}).$mount('#app')

And my vuetify plugin :

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

But when I run yarn dev, I have an error :

...
ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-15[0].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-15[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-15[0].rules[0].use[3]!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
  ╷
4 │ var content = require("!!../../../css-loader/dist/cjs.js!../../../sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./main.sass");
  │                                                                                                                                             ^
  ╵
  node_modules/vuetify/src/styles/main.sass 4:141  root stylesheet

webpack compiled with 95 errors

I follow Vuetify documentation and Mix documentation.

Webpack, Mix and Vuetify loader : SassError: Expected newline

0 Answers