laravel - vue-sass-loader 只编译样式标签，不编译文件

Question

我在 webpack.mix.js 上使用以下规则文件以尝试将我的变量 scss 文件添加到我的所有 vue 组件中:

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

但是当我运行 npm run watch我收到以下错误:

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

ERROR in /Users/jscotto/app/app.app.com/resources/js/app.ts
./resources/js/app.ts

我的全 webpack.mix.js文件:

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$/,
                    include: [
                        path.resolve(__dirname, "resources/js/components")
                    ],
                    use: [
                        "vue-style-loader",
                        "css-loader",
                        {
                            loader: "sass-loader",
                            options: {
                                prependData: "$scotto: #fefefe"
                            }
                        }
                    ]
                }
            ]
        },
        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"
    });

截至 2019 年 12 月 9 日更新错误

ERROR in ./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss& (./node_modules/cs
s-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-lo
ader/dist/cjs.js??ref--8-3!./node_modules/vue-style-loader!./node_modules/sass-loader/dist/cjs.js??ref--12-2!./node_modules/vue-load
er/lib??vue-loader-options!./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

            v-bind:key="index"

                                                                                                 ^
      Expected "{".
  ╷
4 │ var content = require("!!../../../../node_modules/sass-loader/dist/cjs.js??ref--12-2!../../../../node_modules/vue-loader/lib/ind
ex.js??vue-loader-options!./list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss&");
  │                                                                                                                                 
                                                                                                      ^
  ╵
  stdin 4:231  root stylesheet
      in /Users/jscotto/app/app.app.com/resources/js/components/clubs/list-clubs.vue (line 4, column 231)
 @ ./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss& (./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./node_modules/vue-style-loader!./node_modules/sass-loader/dist/cjs.js??ref--12-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss&) 2:14-515
 @ ./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss&
 @ ./resources/js/components/clubs/list-clubs.vue
 @ ./resources/js sync \.vue$/
 @ ./resources/js/app.ts
 @ multi ./resources/js/app.ts ./resources/sass/app.scss

ERROR in /Users/jscotto/app/app.app.com/resources/js/app.ts

Answer 1

你可以试试prependData选项？

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