Repository navigation
Export scss variables to javascript #2517
Description
🙋 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.
Activity
[-]Import scss variables inside javascript[/-][+]Export scss variables to javascript[/+]agu-z commentedon Apr 23, 2019
@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 commentedon Jun 21, 2019
is there any chance that this feature will be implemented?
phmatray commentedon Jul 15, 2019
Any update?
srinivasmerugu commentedon Aug 1, 2019
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 commentedon Aug 2, 2019
This is working great for me: https://github.com/nahody/postcss-export-vars
.postcssrc.jsmarkhermano commentedon Feb 7, 2020
#2517 (comment) +1
hkadyanji commentedon Dec 30, 2020
It looks like this feature has been implemented in Parcel v2
https://v2.parceljs.org/languages/postcss/farooqkz commentedon Dec 19, 2022
I have the same problem. How can I fix it?
The link is broken
hkadyanji commentedon Dec 20, 2022
This looks like the updated link:
https://parceljs.org/languages/sass/
farooqkz commentedon Jan 17, 2023
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
.scssI will have@parcel/transformer-css: Unsupported pseudo class or element: exportand the variable won't be present in the output bundle. Thus I will have unstyled elements.However, if I rename those
.scssfiles to something with.module.scssfiles which have the:exportthing 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: sass/dart-sass#1381