为生产构建SASS时无法读取未定义的属性“toLowerCase”
所以我在跑步后遇到了这种情况yarn build，我得到了这个：
Creating an optimized production build...
Failed to compile.
Cannot read property 'toLowerCase' of undefined
CompileError: Begins at CSS selector .checkbox.checkbox-accent>span
我将所有内容都追溯到这个 SCSS 区域：
&.checkbox-accent {
> span {
border-width: get($checkbox-config, types, accent, borderWidth) !important;
border-style: solid !important;
background-color: transparent !important;
&:after {
display: block;
}
}
}
当这被注释掉时，yarn build工作没有错误。我正在寻找有关此错误可能原因的建议。
回答
我在一个名为 Metronic 的主题上遇到了同样的问题。get 函数本身从 SCSS 映射中获取嵌套值。地图中没有重音值，$checkbox-config默认情况下是：
// Checkbox
$checkbox-config: (
transition: all 0.3s ease,
itemSpace: 1rem,
labelSpace: 0.75rem,
inlineItemSpace: 0.35rem,
types: (
solid: (
theme: (
base-color: $gray-200
),
sizes: (
default: (
base: 18px,
tick: 10px,
),
lg: (
base: 24px,
tick: 12px,
)
)
),
outline: (
theme: (
base-color: $gray-400
),
sizes: (
default: (
base: 18px,
tick: 10px,
),
lg: (
base: 24px,
tick: 12px,
)
)
)
) !default;
如您所见，没有 property (root) > types > accent > borderWidth。
要解决此问题，请将变量修改为以下内容（从单选按钮中获取的像素值以保持样式）：
// Checkbox
$checkbox-config: (
transition: all 0.3s ease,
itemSpace: 1rem,
labelSpace: 0.75rem,
inlineItemSpace: 0.35rem,
types: (
solid: (
theme: (
base-color: $gray-200
),
sizes: (
default: (
base: 18px,
tick: 10px,
),
lg: (
base: 24px,
tick: 12px,
)
)
),
outline: (
theme: (
base-color: $gray-400
),
sizes: (
default: (
base: 18px,
tick: 10px,
),
lg: (
base: 24px,
tick: 12px,
)
)
),
accent: (
borderWidth: 3px,
sizes: (
default: (
base: 24px,
tick: 14px,
),
lg: (
base: 30px,
tick: 10px,
)
)
)
)
) !default;