I am trying to import variables from .json file in a .scss file with node-sass-json-importer package.
I am facing a problem because this package is not automatically integrated in react-scripts/config/webpack.config.js. So, I would like to modify this file as follows below :
- Add
const jsonImporter = require ('node-sass-json-importer'); - Add an optional
preProcessorOptionsobject parameter to getStyleLoaders function. Indeed, this function has no preprocessor optionsconst getStyleLoaders = (cssOptions, preProcessor)and the only option added by default issourceMap: true. Of course, this function will take in account this new parameter. - Add a third parameter in the getStyleLoaders call for scss file.
{
implementation: require("sass"),
sassOptions: {
importer: jsonImporter(),
}
}
It works on a minimal webpack implementation (without react). But, I suppose it is not so easy to apply changes to react-scripts/config/webpack.config.js and I suspect I will have many problems. Perhaps, there is an another way to do it.
Thanks for answer.