1

I have an environment variable CDN_URL and I want to send this variable to the SCSS file. I am also tried prependData of sass-loader.

I have to use Laravel 5.7, Laravel Mix 4.1.2 and webpack 4.27.1

error: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"

Below is my 'webpack.mix.js' file code.

mix.webpackConfig({
module: {
    rules: [
        {
            test: /\.s[ac]ss$/i,
            use: [
                'vue-style-loader',
                'style-loader',
                'css-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        indentedSyntax: true,
                        prependData: '$cdn-s3-static-url: ' + process.env.CDN_S3_STATIC_URL + ';',
                    },
                },
            ],
        },
    ],
},

});

Below is my '_functions.scss' file code:

@function asset($type, $file) {
 @return url('#{$cdn-s3-static-url}#{$asset-base-path}#{$type}/#{$file}');
}
Prashant Pawar
  • 33
  • 2
  • 6

3 Answers3

2

In my case I was running a gatsby site. Before each build, it runs gatsby-config.js, which has access to environment variables.

So at the top of the .js file that builds, before module.exports, I put this:

if(process.env.NODE_ENV === 'development') {
  fs.writeFileSync('./src/styles/build-style.scss','$root: "/development-path/";');
} else {
  fs.writeFileSync('./src/styles/build-style.scss','$root: "/production-path/";');
}

This results in a file which looks like:

$root: "/development-path/";

Then in the SCSS files where I needed ENV-dependent behaviour, I have:

@import './build-style.scss';
@font-face {
  font-family: "MyFontFamily";
  src: url($root + "font/MyFontFamily.woff") format('woff');
}

And now my asset (font in this example) loads from different spots depending on my dev/production environment variable.

It feels like a big hack and I'm sure there's a more correct way somewhere, but this got me moving again after an hour stoppage and it is working so far. I will probably extend it in the future to have build-style-dev.scss, build-style-prod.scss, and just copy them into build-style.scss at compile time. Or research the correct way.

ArtHare
  • 1,798
  • 20
  • 22
1

You can prepend data to SASS using sass-loader

For example to pass the CDN_URL from .env

Extend webpack.mix.js


module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: '$env: ' + process.env.CDN_URL + ';',
            },
          },
        ],
      },
    ],
  },
};
Salim Djerbouh
  • 10,719
  • 6
  • 29
  • 61
  • I use this but I am getting below error: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" I have use Laravel 5.7, Laravel Mix 4.1.2 and webpack webpack 4.27.1. – Prashant Pawar Oct 01 '19 at 08:17
  • We can't tell if you don't include your SASS file – Salim Djerbouh Oct 11 '19 at 14:04
  • _functions.scss: ``` @function asset($type, $file) { @return url('#{$cdn-s3-static-url}#{$asset-base-path}#{$type}/#{$file}'); } ``` – Prashant Pawar Oct 11 '19 at 19:41
-1

You may inject environment variables into Laravel Webpack Mix by prefixing a key in your .env file with MIX_. After the variable has been defined in your .env file, you may access via the process.env object.

So in your example, you should create a new variable in .env file like MIX_CDN_URL and inside webpack.mix.js you can access it using 

process.env.MIX_CDN_URL

You can sass-loader that will achieve the results you desire.

jureispro
  • 1,342
  • 5
  • 22
  • 43