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";',
}
}
]
}