[试图在Laravel Vue项目上全局导入变量时，模块构建失败

Question

我正在尝试将我的变量文件与webpack.mix.js文件一起全局导入，但未能成功完成。通过直接在组件上导入，可以确认我的别名可以正常工作，但是当我尝试使用vue-style-loader将其包括在每个vue样式标签中时，它会在终端中给我带来很大的错误。

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "base/normalize";
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/jscotto/app/app.app.com/resources/sass/app.scss (line 1, column 1)
    at runLoaders (/Users/jscotto/app/app.app.com/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/jscotto/app/app.app.com/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/jscotto/app/app.app.com/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/jscotto/app/app.app.com/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/Users/jscotto/app/app.app.com/node_modules/sass-loader/dist/index.js:89:7)
    at Object.done [as callback] (/Users/jscotto/app/app.app.com/node_modules/neo-async/async.js:8067:18)
    at options.error (/Users/jscotto/app/app.app.com/node_modules/node-sass/lib/index.js:294:32)
 @ ./resources/sass/app.scss

ERROR in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/postcss-loader/src??postcss0!./node_
modules/resolve-url-loader??ref--6-4!./node_modules/sass-loader/dist/cjs.js??ref--6-5!./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--12-2!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "base/normalize";
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/jscotto/app/app.app.com/resources/sass/app.scss (line 1, column 1)
 @ ./resources/sass/app.scss 2:14-397

我相信这可能与我编译普通的scss文件的方式有关，因此我将在下面包括整个混合文件：

mix.sourceMaps(true, "source-map")
    .ts("resources/js/app.ts", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: "ts-loader",
                    options: {
                        appendTsSuffixTo: [/\.vue$/]
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.scss$/,
                    use: [
                        "vue-style-loader",
                        "css-loader",
                        {
                            loader: "sass-loader",
                            options: {
                                data: `@import "@/_var.scss`
                            }
                        }
                    ]
                }
            ]
        },
        resolve: {
            extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"],
            alias: {
                "@": path.resolve("resources/sass")
            }
        }
    })
    .extract(["vue"])
    .version()
    .scripts("resources/js/modules/*.js", "public/js/modules.js")
    .options({
        postCss: [
            require("lost"),
            require("autoprefixer")({
                grid: true
            })
        ]
    })
    .browserSync({
        proxy: process.env.BROWSERSYNC_PROXY,
        host: process.env.BROWSERSYNC_HOST,
        browser: "google chrome"
    });

引起问题的规则是：

{
    test: /\.scss$/,
    use: [
        "vue-style-loader",
        "css-loader",
        {
            loader: "sass-loader",
            options: {
                data: `@import "@/_var.scss`
            }
        }
    ]
}

Answer 1

只是碰到了同样的问题，原来我在全局定义中省略了分号。尝试一下：

{
    test: /\.scss$/,
    use: [
        "vue-style-loader",
        "css-loader",
        {
            loader: "sass-loader",
            options: {
                data: `@import "@/_var.scss;` //<- Semicolon here.
            }
        }
    ]
}