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

【问题标题】：How do I convert SASS variable to native CSS variable while bundling with webpack?如何在与 webpack 捆绑时将 SASS 变量转换为原生 CSS 变量？
【发布时间】：2021-09-14 02:09:43
【问题描述】：

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

【问题讨论】：

标签： webpack sass node-sass gulp-sass webpack-style-loader

【解决方案1】：

在您定义变量的 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;

【讨论】：