0

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.

Stef1611
  • 1,978
  • 2
  • 11
  • 30

0 Answers0