如何根据环境更改 SCSS 变量 | laravel 8

Question

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

我有这个网站，在 localhost/demo 服务器上它在子文件夹上，在实时服务器上它在主文件夹上，我在 .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();