how to change SCSS variable based on the env | laravel 8

user_1448379 0
Viewed 335

I want to change the SCSS variable $fa_font_path based on the env APP_DIR ?

I have this website where on localhost/demo server It's on the subfolder and on the live server it's on the main folder, I added APP_DIR on .env to present the subfolder APP_DIR=/subfoulder/ where on the live server it's APP_DIR=/.

I found this answer and it's not working

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();

this part generates an error

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

Error:

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.

Note: this is not a duplication question, I already googled and read other answers.

laravel-8 laravel-mix laravel webpack sass
1 Answers

laravel 8 update

data property changed to prependData

On laravel 8 to pass data on your sass files you will need to add that string of sass code on an object like that one:

{
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();
user_14483790
Related