Question

我用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加载器，但是仍然无法读取文件。

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;

Answer 1

我可以通过如下编辑library(dbplyr) lahman_postgres() #> Error in postgresqlNewConnection(drv, ...): RS-DBI driver: (could not connect bs@localhost:5432 on dbname "lahman": FATAL: database "lahman" does not exist #> ) lahman_sqlite() #> Creating table: AllstarFull #> Creating table: Appearances #> Creating table: AwardsManagers #> Creating table: AwardsPlayers #> Creating table: AwardsShareManagers #> Creating table: AwardsSharePlayers #> Creating table: Batting #> Creating table: BattingPost #> Creating table: CollegePlaying #> Creating table: Fielding #> Creating table: FieldingOF #> Creating table: FieldingPost #> Creating table: HallOfFame #> Creating table: LahmanData #> Creating table: Managers #> Creating table: ManagersHalf #> Creating table: Master #> Creating table: Parks #> Creating table: People #> Creating table: Pitching #> Creating table: PitchingPost #> Creating table: Salaries #> Creating table: Schools #> Creating table: SeriesPost #> Creating table: Teams #> Creating table: TeamsFranchises #> Creating table: TeamsHalf #> src: sqlite 3.29.0 [/var/folders/x8/gt429559287f1y6tjjtyc9vw0000gn/T//RtmpF1A7Xj/lahman.sqlite] #> tbls: AllstarFull, Appearances, AwardsManagers, AwardsPlayers, #> AwardsShareManagers, AwardsSharePlayers, Batting, BattingPost, #> CollegePlaying, Fielding, FieldingOF, FieldingPost, HallOfFame, #> LahmanData, Managers, ManagersHalf, Master, Parks, People, Pitching, #> PitchingPost, Salaries, Schools, SeriesPost, sqlite_stat1, sqlite_stat4, #> Teams, TeamsFranchises, TeamsHalf文件来做到这一点：

dplyr::src_postgres()
#> src:  postgres 11.4.0 [bs@localhost:5432/bs]
#> tbls: airlines, airports, flights, weather

然后我创建了一个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导入了json文件

要使用json文件中的属性，我必须将{ "danger": "#cc3333", "info": "#3399ff", "success": "#33cc99", "warning": "#ffcc00" }放在密钥名称之前（例如：@import "src/assets/json/colors.json";）

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

1 个答案: