我有一个正在使用Laravel Mix版本3的项目（由于Webpack 4已知的动态导入问题，我无法升级）。

在我的webpack配置中，我有以下规则：

rules: [
    {
        test: /\.scss$/,loader: "sass-loader",options: {
            data: '$static-url: \'' + config.app.urls.static + '\';'
        }
    }
]

此规则的目的是将$static-url变量注入所有SCSS编译中。

以上规则在任何.scss文件上都可以正常运行，但是，在我的Vue模板中的任何内联.scss上均不起作用。它可以在使用最新版本的Laravel Mix的其他项目中完美运行，但是我无法在该项目中使用它。

例如，它不适用于以下情况：

<template>

    <div class="foo"></div>

</template>

<style lang="scss" scoped>

    @import "~core-styles/brand/_variables.scss";
    @import "~core-styles/brand/_mixins.scss";

    .foo {
        background-image: url($static-url + '/assets/images/example.png');
    }

</style>

上面将输出以下错误：

  

未定义变量：“ $ static-url”。

有人可以建议为什么这不起作用吗？

只是要重申一下，它适用于.scss文件，仅不适用于我的Vue模板...

其他信息

我在package.json中定义了以下版本（仅列出了相关的软件包）：

"devDependencies": {
    "laravel-mix": "^3.0.0","node-sass": "^4.12.0","sass": "^1.23.0","sass-loader": "^7.3.1","vue": "^2.6.10"
    "vue-template-compiler": "^2.6.10"
}