如何在与 webpack 捆绑时将 SASS 变量转换为原生 CSS 变量？

问题描述

我需要捆绑文件以使用原生 CSS 变量代替 SASS 变量。 例如，我想将输出捆绑文件中的 SASS 变量“$warning”替换为“var(--warning)”。

解决方法

在定义变量的 SASS 文件中，您可以像这样重新组织定义

//style.scss

// Define CSS variables
:root {
    --warning: red;
}

// Connect them with SASS variable
$warning: var(--warning);

body {
    color: $warning;
}

它将被编译为

:root {
  --warning: red;
}

body {
  color: var(--warning);
}

注意：对于制表符缩进的 SASS 语法（.sass 文件）:root 会抛出语法错误，所以在前面写反斜杠 (/)

// style.sass

\:root 
  --warning: red;