将JSON导入SCSS/SASS

Question

我有一个theme.json和一个index.scss文件来定制材料设计风格。

theme.json

{
    "palette": {
      "primary": {
        "main": "#1A1A1A"
      },
      "secondary": {
        "main": "#993355"
      },
      "error": {
        "main": "#B00020"
      },
      "info": {
        "main": "#EAF4FC"
      },
      "text": {
        "primary": "#1A1A1A"
      },
      "other": {
        "accents": ["#BCAAA4", "rgba(128, 236, 40, 0.5)"]
      }
    },

  }

index.scss

@import "../theme/theme.json";

@use "@material/theme" with (
    $primary: $palette.primary.main, ???????
    $secondary: #018786,
    $background: #fff,
    $surface: #fff,
    $error: #b00020,
    $on-primary: #fff,
    $on-secondary: #442b2d,
    $on-error: #fff,
);

@use "material-components-web/material-components-web";

是否有一种与我的scss文件中的第一个变量类似的将json对象值导入scss的简单方法？提前感谢

Answer 1

您可以使用节点-sass-json-进口商。

https://github.com/pmowrer/node-sass-json-importer

我们项目中的例子

webpack.config.json

const jsonInSassImporter = require('node-sass-json-importer');
module.exports = {
  /* ... */

  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
              webpackImporter: false,
              sassOptions: {
                importer: jsonInSassImporter()
              }
            }
          },
        ],
      },
    ],
  },
  /* ... */
}

图标-字体-哈希-编码. icon生成当某些图标更改

{"iconFontHashCode":"adc26c62bf5e5cca8e8668f4cc17e0a9"}

字体-图标.font

@import '../../../assets/font/icon/icon-font-hash-code.json';

/* ... */

@mixin font-face() {
  @font-face {
    font-family: icon;
    src:
      url('../assets/font/icon/icon.woff2?v=#{$iconFontHashCode}') format('woff2'),
      url('../assets/font/icon/icon.woff?v=#{$iconFontHashCode}') format('woff'),
      url('../assets/font/icon/icon.svg#Roboto?v=#{$iconFontHashCode}') format('svg');
    /* ... */
  }
}