如何根据环境改变SCSS变量

Question

我想根据环境APP_DIR改变SCSS变量$fa_font_path

我有这个网站，在本地主机/演示服务器上，它在子文件夹上，在活动服务器上，它在主文件夹上，我在。env上添加了APP_DIR来呈现子文件夹APP_DIR=/subfoulder/，在活动服务器上它是APP_DIR=/。

我找到了这个答案，它不工作

const mix = require("laravel-mix");

var fa_font_path =
process.env.APP_DIR + "fonts/fontawesome-free/webfonts";
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css", {
data: "$fa-font-path:'" + fa_font_path + "';"
})      
.setResourceRoot(process.env.APP_DIR)
.sourceMaps();

这部分产生一个错误

, {
data: "$fa-font-path:'" + fa_font_path + "';"
}

错误:

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

注意:这不是一个重复的问题，我已经在谷歌上搜索并阅读了其他答案。

Answer 1

laravel 8更新

data属性更改为prependData

在laravel 8中，要在你的sass文件上传递数据，你需要在一个对象上添加sass代码字符串:

{
prependData: "$fa-font-path:'" + fa_font_path + "';"
}

webpack.mix.js

const mix = require("laravel-mix");

var fa_font_path =
process.env.APP_DIR + "fonts/vendor/@fortawesome/fontawesome-free/webfonts";

mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css", {
prependData: "$fa-font-path:'" + fa_font_path + "';"
})
.setResourceRoot(process.env.APP_DIR)
.sourceMaps()
.version();