Environment variables / data: possibility to use a function

[crazyx13th]

would be cool to use a function to get somthing like "load context / [name]" to add more dynamic stuff
thx!

greetings
crazyx13th

[alexander-akait]

@crazyx13th can you provide example?

[crazyx13th]

options: {
	data: ()=>{ return
		'$isDesktop:' + (this.resourcePath === 'desktop' ? 'true' : 'false') + ';' +
		'$isTablet:' + (this.resourcePath=== 'tablet' ? 'true' : 'false') + ';' +
		'$isMobile:' + (this.resourcePath=== 'mobile' ? 'true' : 'false') + ';' +
		'$isWide:' + (this.resourcePath!== 'mobile' ? 'true' : 'false') + ';'
	}
}

something like this :-)
see also: https://webpack.github.io/docs/loaders.html#loader-context

Thx!

[crazyx13th]

target is to get the current entry-name (e.g. c2g-desktop)

see also https://stackoverflow.com/questions/44970996/reactjs-getting-sperated-css-output-using-webpack-extracttextplugin

[michael-ciniawsky]

@crazyx13th Is data for e.g passing custom variables ? If so feel free to tackle this and send a PR I will assist if needed or do it when I have time. This is also needed to implement watching these

[alexander-akait]

@crazyx13th PR welcome

You can use getter instead of function 🚀

[aprilmintacpineda]

You can get around this by doing:

options: {
  functions: {
    env (name, done) {
      if (name in process.env === false) throw Error(`${name} does not exists in process.env`);
      done(nodeSass.types.String(process.env[name]));
    }
  }
}

Then on scss

background-color: env(theme-color)

Not a great solution, but should help out.

[alexander-akait]

@aprilmintacpineda Can you send a PR to documentation about this?