“@content”之后的无效 CSS：预期为“}”，为“($material-light);答案

【问题标题】：Invalid CSS after " @content": expected "}", was "($material-light);“@content”之后的无效 CSS：预期为“}”，为“($material-light);
【发布时间】：2021-06-19 23:55:00
【问题描述】：

here is the sample picture即使按照我看过的教程中的说明进行操作，我仍然遇到问题。

这是我的 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');

另外，我的 sass-loader 我将我的 sass-loader 版本从 8.0 降级到 7.1 这是我的依赖项

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

请帮帮我，非常感谢

这是我的 vuetify.js

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

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

这是我的 app.js

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

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

这是链接 https://www.youtube.com/watch?v=VaI9tV8GQFk

【问题讨论】：

你能分享更多你的代码吗？
嗨@maxshuty，我已经更新了代码
@maxshuty，我需要删除依赖项中的 node-sass 吗？
感谢您提供额外的代码，但我更想寻找您使用@content 的代码，您也可以分享一下吗？ :)
您好，先生，@content 是（来自 ./node_modules/sass-loader/dist/cjs.js）：

标签： vue.js webpack sass vuetify.js sass-loader

【解决方案1】：

这是因为您需要使用sass 而不是node-sass。删除node-sass 并改用sass，这个错误应该会消失。

【讨论】：