Invalid CSS after " @content": expected "}", was "($material-light);

Question

here is the sample pictureI still have an issue even if I followed the instruction in the tutorial I watched.

here is my webpack.mix.js

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

  var webpackConfig = {
    plugins: [
      new VuetifyLoaderPlugin(),
      new CaseSensitivePathsPlugin()
    ],
  }

mix.webpackConfig( webpackConfig ); 

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

Also, my sass-loader I downgraded my sass-loader version from 8.0 to 7.1 here is my dependencies

"sass": "^1.32.8",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.10"

Please help me, thank you very much

Here is my vuetify.js

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

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Here is my app.js

import Vue from 'vue';
import Vuetify from '../plugins/vuetify';

new Vue ({
    router,
    Vuetify,
    render: h => h(App),
}).$mount('#app');

Here is the link https://www.youtube.com/watch?v=VaI9tV8GQFk

Answer 1

This is because you need to use sass instead of node-sass. Remove node-sass and use sass instead and this error should go away.