import JSON to 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";

有没有一种简单的方法可以将json对象值导入scs，类似于我的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-font-hash-code.json-当某些图标更改时生成

{"iconFontHashCode":"adc26c62bf5e5cca8e8668f4cc17e0a9"}

_font-icon.scss

@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');
/* ... */
}
}