将配置值从 json 文件导入到 scss答案

【问题标题】：Importing configuration values from json file to scss将配置值从 json 文件导入到 scss
【发布时间】：2019-12-08 19:10:24
【问题描述】：

我使用 Vuejs 创建了一个 Web 应用程序，我在其中添加了一个 json 配置文件，例如，允许我启用或禁用某些部分。对于应用程序的样式，我添加了使用 scss 文件自定义的 Bootstrap。

现在在 scss 文件中，我添加了一些颜色变量，但是，我想移动到 json 文件以将配置放在一个位置。不幸的是，我无法从 scss 文件中导入 json 文件并读取其内容。

有没有办法从scss文件中读取json文件？

我尝试使用这些路线导入：

@import "./../json/config.json";
@import "@assets/json/config.json";
@import "Assets/json/config.json";

我安装了this npm package，并尝试添加这个'vue.config.js'的importer: jsonImporter() css loader，但仍然无法读取文件。

custom-bootstrap.scss

@import "./../json/config.json";
...
$blue: #3399ff;
$green: #33cc99;
$red: #cc3333;
$yellow: #ffcc00;

$danger: $red;
$info: $blue;
$success: $green;
$warning: $yellow;
...

config.json

...
"colors": {
  "danger": "#cc3333",
  "info": "#3399ff",
  "success": "#33cc99",
  "warning": "#ffcc00"
}
...

vue.config.js

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => {
    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 => {
        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 => 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";
        `
      }
    }
  }
};

我想这样设置scss文件的颜色：

$danger: colors.danger;
$info: colors.info;
$success: colors.success;
$warning: colors.warning;

【问题讨论】：

标签： json vue.js webpack sass bootstrap-4

【解决方案1】：

我可以通过如下编辑vue.config.js 文件来做到这一点：

const path = require("path");
const jsonImporter = require('node-sass-json-importer');

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => {
    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 => {
        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 => x.name === 'data-test');
                  attrsList.splice(index, 1);
                }
              }
              return astEl;
            }
          }
        ];
        return options;
      });
  },
  css: {
    loaderOptions: {
      sass: {
        importer: jsonImporter(),
        data: `
          @import "@/assets/scss/_mixins.scss";
          @import "@/assets/scss/_z-index.scss";
          @import "@/assets/scss/custom-bootstrap.scss";
        `
      }
    }
  }
};

然后我创建了一个像这样的colors.json 文件：

{
  "danger": "#cc3333",
  "info": "#3399ff",
  "success": "#33cc99",
  "warning": "#ffcc00"
}

最后我用这个路径@import "src/assets/json/colors.json";导入了json文件

要使用 json 文件中的属性，我必须将 $ 放在密钥名称之前（例如：$info）

【讨论】：