“@content”后无效 CSS：应为“}”，为“($material-light)；

Question

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');

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

Answer 1

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

“@content”后无效 CSS：应为“}”，为“($material-light)；

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

vue.js

webpack

sass

vuetify.js

sass-loader