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

Posted 2023-02-21

【中文标题】如何在与 webpack 捆绑时将 SASS 变量转换为原生 CSS 变量？

【英文标题】：How do I convert SASS variable to native CSS variable while bundling with webpack?

【发布时间】：2021-09-14 02:09:43

【问题描述】：

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

【参考方案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;