title: Importing configuration values from json file to scss
body: <p>I created a web application with Vuejs to which I added a json configuration file that allows me, for example, to enable or disable some sections. For the style of the application I added Bootstrap that I customized with a scss file.</p>
  
  <p>Now in the scss file I have added some variables for colors that, however, I would like to move to the json file to have the configuration in one place. Unfortunately I'm not able to import the json file from the scss file and read its content.</p>
  
  <p>Is there a method to read the json file from the scss file?</p>
  
  <p>I tried to import with these routes:</p>
  
  <ul>
  <li>@import "./../json/config.json";</li>
  <li>@import "@assets/json/config.json";</li>
  <li>@import "Assets/json/config.json";</li>
  </ul>
  
  <p>I installed <a href="https://github.com/Updater/node-sass-json-importer" rel="nofollow noreferrer">this npm package</a>, and tried to add this <code>importer: jsonImporter()</code> css loader of 'vue.config.js', but still could not read the file.</p>
  
  <p><em>custom-bootstrap.scss</em></p>
  
  <pre class="lang-css prettyprint-override"><code>@import "./../json/config.json";
  ...
  $blue: #3399ff;
  $green: #33cc99;
  $red: #cc3333;
  $yellow: #ffcc00;
  
  $danger: $red;
  $info: $blue;
  $success: $green;
  $warning: $yellow;
  ...
  </code></pre>
  
  <p><em>config.json</em></p>
  
  <pre><code>...
  "colors": {
    "danger": "#cc3333",
    "info": "#3399ff",
    "success": "#33cc99",
    "warning": "#ffcc00"
  }
  ...
  </code></pre>
  
  <p><em>vue.config.js</em></p>
  
  <pre><code>const path = require("path");
  
  function resolve(dir) {
    return path.join(__dirname, dir)
  }
  
  module.exports = {
    chainWebpack: config =&gt; {
      config.resolve.alias
        .set("Assets", resolve("./src/assets/"))
        .set("Components", resolve("./src/components/"))
        .set("Constants", resolve("./src/constants/"))
        .set("Setup", resolve("./src/setup/"))
        .set("Store", resolve("./src/store/"))
        .set("Utils", resolve("./src/utils/"))
        .set("Views", resolve("./src/views/"));
      config.module
        .rule('vue')
        .use('vue-loader')
        .tap(options =&gt; {
          options.compilerOptions.modules = [
            {
              preTransformNode(astEl) {
                if (process.env.NODE_ENV === 'production') {
                  const { attrsMap, attrsList } = astEl;
                  if (attrsMap['data-test']) {
                    delete attrsMap['data-test'];
                    const index = attrsList.findIndex(x =&gt; x.name === 'data-test');
                    attrsList.splice(index, 1);
                  }
                }
                return astEl;
              }
            }
          ];
          return options;
        });
    },
    css: {
      loaderOptions: {
        sass: {
          data: `
            @import "@/assets/scss/_mixins.scss";
            @import "@/assets/scss/_z-index.scss";
            @import "@/assets/scss/custom-bootstrap.scss";
          `
        }
      }
    }
  };
  </code></pre>
  
  <p>I would like to set the colors of the scss file in this way:</p>
  
  <pre class="lang-css prettyprint-override"><code>$danger: colors.danger;
  $info: colors.info;
  $success: colors.success;
  $warning: colors.warning;
  </code></pre>