0

I have a mix file, and I'm passing it the data like this:

mix.sass('resources/sass/styles.scss', 'public/assets/css')
    .options({
        processCssUrls: false,
        prependData: '$test: testing prepend;',
        postCss: [tailwindcss('./tailwind.config.js')],
    });

And I'm just doing this:

body {
    content: $test;
}

To test if I get the $test variable. However, when I run the app, I get:

enter image description here

What am I doing wrong?

P.S: php artisan --version returns: 8.48.1

Asaad Mahmood
  • 316
  • 3
  • 15

1 Answers1

2

Use prependData not inside options but as a third parameter of a sass method like it said here

Behind the scenes, Laravel Mix of course defers to webpack's sass-loader to load and compile your Sass files. From time to time, you may need to override the default options that we pass to it. Use the third argument to mix.sass() in these scenarios.

mix.sass('src/app.scss', 'dist', {
    sassOptions: {
        outputStyle: 'nested'
    }
});

So in your case it woould be

mix.sass('resources/sass/styles.scss', 'public/assets/css', {
        additionalData: '$test: testing prepend;',
    })
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    });
Asaad Mahmood
  • 316
  • 3
  • 15
Ihar Aliakseyenka
  • 9,587
  • 4
  • 28
  • 38
  • I tried that before as well I think, and when I do that, I get this error: `ERROR in ./resources/sass/styles.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.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.` – Asaad Mahmood Jun 24 '21 at 14:20
  • Does this https://stackoverflow.com/questions/58184549/sass-loader-error-invalid-options-object-that-does-not-match-the-api-schema answer your question? – Ihar Aliakseyenka Jun 24 '21 at 14:28
  • 1
    I figured it out, its `additionalData` now, instead of `prependData` – Asaad Mahmood Jun 24 '21 at 14:43