Webpack、Mix 和 Vuetify 加载器：SassError：预期换行符

Question

我在 Laravel 项目中使用 Vuetify 加载器，但编译不起作用。

Laravel：8.46 视图：2.6.14 验证：2.5.3

这是我的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"
    }
}

我的 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();
}

我的参赛作品：

require('./bootstrap');

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

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

还有我的 vuetify 插件：

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

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

但是当我运行yarn dev时，出现错误：

...
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

我遵循 Vuetify 文档 和 Mix 文档。

Answer 1

我知道这个答案来得很晚，但也许可以为以后的问题提供参考。我在 vue 3 中遇到了同样的问题。我在这个论坛中找到了解决方案：

博客.csdn.net

我的解决方案是将“lang = scss”添加到样式标签中，或者将“sass”更改为“scss”