Require JS values from SASS/SCSS
// themes.js
module.exports = {
light: {
color: 'white',
background: 'black',
},
dark: {
color: 'black',
background: 'white',
},
};
// themes.scss
$themes: ffi-require('./themes');
$theme-light: map-get($themes, 'light');
$theme-dark: map-get($themes, 'dark');
body.theme-light {
color: map-get($theme-light, 'color');
background: map-get($theme-light, 'background');
}
body.theme-dark {
color: map-get($theme-dark, 'color');
background: map-get($theme-dark, 'background');
}
// config.js
module.exports = {
env: process.env,
};
// hack.scss
$node-env: ffi-require('./config', 'env.NODE_ENV');
body:after {
content: $node-env;
};
yarn add sass-ffi
Simply replace sass-loader
with sass-ffi/webpack-loader
.
const sass = require('node-sass');
const { withSassFfiOptions } = require('sass-ffi');
sass.render(withSassFfiOptions({
/* your options here */
}), (err, result) => {
console.log({ err, result });
});