scss 变量解析不了

1、scss 变量解析不了scss 变量解析不了的问题，这就难堪了，我们都知道 scss 变量是如下定义 $width: "100px" 我正常用法的时候，应当是如下： .box width: $width; 是的，上面引用变量是没有任何问题的 现在来看看今日遇到什么问题了呢？ / 尾随换肤 mixin bg-theme-image($url) each $theme-name, $theme-map in $themes .theme-"" + $theme-name & background: url($u

2、rl + "-" + $theme-name + ".png") no-repeat; background-size: 100%; media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) background: url($url + "-" + $theme-name + "-2x.png") no-repeat; background-size: 100%; med

3、ia (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) background: url($url + "-" + $theme-name + "-3x.png") no-repeat; background-size: 100%; 上面的 $theme-name 是解析不出来的，在 本地 npm run dev 是没有任何问题的，但是呢？在我 npm run build 的时候，却报错了，没有打包胜利，就是这个变量解析不了的缘由，导致路劲找不到对

4、应的 url 路径 修改成如下： / 尾随换肤 mixin bg-theme-image($url) each $theme-name, $theme-map in $themes .theme-"" + $theme-name & background: url($url + "-" + $theme-name + ".png") no-repeat; background-size: 100%; media (-webkit-min-device-pixel-rati

5、o: 2),(min-device-pixel-ratio: 2) background: url($url + "-" + $theme-name + "-2x.png") no-repeat; background-size: 100%; media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) background: url($url + "-" + $theme-name + "-

6、3x.png") no-repeat; background-size: 100%; 给 $theme-name 加上 $theme-name去解析 这个变量就不会报错，打包也没有问题了 关于 scss 插值问题总结如下 普通我们定义的变量都为属性值，可挺直用法，但是假如变量作为属性或在某些特别状况下则必需要以 $variables 形式用法。 $borderdirection: top !default; $basefontsize: 12px !default; $baselineheight: 1.5 !default; / 应用于 class 和属性 .border-$borderdirection border-$