Export scss variables to javascript

[ghost]

🙋 feature request

It would be really cool to have scss variable exports available to js.

// variables.scss
$white-color: #fcf5ed;
$dark-color: #402f2b;
$light-color: #e6d5c3;
$medium-color: #977978;
$alert-color: #cb492a;
$light-black-color: #706e72;
$black-color: #414042;

// the :export directive is the magic sauce for webpack
:export {
  whitecolor: $white-color;
  darkcolor: $dark-color;
  lightcolor: $light-color;
  mediumcolor: $medium-color;
  alertcolor: $alert-color;
  lightblackcolor: $light-black-color;
  blackcolor: $black-color;
}

And from .js files:

import variables from 'variables.scss';

const CSS = {
  backgroudColor: variables.blackcolor
}

export default ({}) => {
  return <div style={CSS}>Content</div>
}

🤔 Expected Behavior

Please refer to this page.

😯 Current Behavior

At the moment it says "variables is undefined", of course.

[agu-z]

@coder82 I had the same problem, and I made this module: https://www.npmjs.com/package/sass3js It is not a parcel plugin because I wanted type safety in my variables, but you might still find it useful. I set up a file watcher in my editor and forgot about it :)

[mayous83]

is there any chance that this feature will be implemented?

[phmatray]

Any update?

[srinivasmerugu]

Even I am in the same boat. Looking to access the scss varaibles in react component . Please let me know if we have any other workaround as :export seems not working. Not sure with what import name i need to call in react component since if i give " import _variables from '../scss/_variables.scss';" here _variables.scss is the file name which contains

// variables.scss $white-color: #fcf5ed; // the :export directive is the magic sauce for webpack :export { whitecolor: $white-color; }

I am scratching my head to get the "whitecolor" variable available in react component .

Also, I am using webpack as below

{ test: '/.scss$/', use: [{ loader: 'style-loader' // creates style nodes from JS strings }, { loader: 'css-loader' // translates CSS into CommonJS }, { loader: 'sass-loader' // compiles Sass to CSS }] }

Any help would be highly appreciated!!

[will-e-yams]

This is working great for me: https://github.com/nahody/postcss-export-vars

.postcssrc.js

module.exports = {
  plugins: [
    require('autoprefixer')({ flexbox: 'no-2009' }),
    require('postcss-export-vars')({
      file: 'src/scss/variables',
      type: 'json',
      match: [],
    }),
  ],
};

[markhermano]

https://github.com/parcel-bundler/parcel/issues/2517#issue-396297569 +1

[hkadyanji]

It looks like this feature has been implemented in Parcel v2 https://v2.parceljs.org/languages/postcss/

[farooqkz]

I have the same problem. How can I fix it?

It looks like this feature has been implemented in Parcel v2 https://v2.parceljs.org/languages/postcss/

The link is broken

[hkadyanji]

This looks like the updated link: https://parceljs.org/languages/sass/

[farooqkz]

I think this is a bug. I am coming from a project which used webpack. If I have such a scss file(similar to what OP has sent) which ends with .scss I will have @parcel/transformer-css: Unsupported pseudo class or element: export and the variable won't be present in the output bundle. Thus I will have unstyled elements.

However, if I rename those .scss files to something with .module.scss files which have the :export thing inside, the problem will be solved.

Edit:

A solution which will probably work but very unacceptable is changing suffixes of all those files in my UI library to .module.scss.

Edit2:

Related: https://github.com/sass/dart-sass/issues/1381