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

Posted 2023-02-22

【中文标题】将配置值从 json 文件导入到 scss

【英文标题】：Importing configuration values from json file to 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;

【参考方案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）