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
preProcessorOptions
object 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.