Webpack.config.js modification to import json variables in a sass file?

[steph1611]

I posted this question on stackoverflow but I think it was not the good place.
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 :

1. Add const jsonImporter = require ('node-sass-json-importer');
2. Add an optional preProcessorOptions object parameter to getStyleLoaders function. Indeed, this function has no preprocessor options const getStyleLoaders = (cssOptions, preProcessor) and the only option added by default is sourceMap: true. Of course, this function will take in account this new parameter.
3. 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.

(Please be free to answer me that this place is not the right place to ask this kind of question)