Nuxt 项目中的 Tailwind CSS 尝试使用 SCSS 变量会引发“未知单词”错误答案

【问题标题】：Tailwind CSS in Nuxt project trying to use SCSS variable throws "Unknown word" errorNuxt 项目中的 Tailwind CSS 尝试使用 SCSS 变量会引发“未知单词”错误
【发布时间】：2022-01-07 21:54:56
【问题描述】：

我在我的 Nuxt JS 项目中使用 Tailwind CSS，需要创建一个简单的 scss 文件，其中包含一些变量，然后在 :root 选择器中使用这些变量来生成一些主题颜色。我已经创建了我的变量，然后将它们包含在 assets/scss

的 tailwind.scss 文件中

我面临的问题是 PostCSS 认为我在此选择器中定义的变量存在错误并抛出以下错误：

postcss-custom-properties：未知单词

对我来说，这不是错误，因为我正在处理支持变量的 SCSS 文件，我在这里缺少什么？

assets/scss/tailwind.scss

@import '../../brand-theme';

/* In your CSS */
:root {
  --color-primary: $primary;
  --color-primary-darken: $primary;
  --color-secondary: $secondary;
}

@import './layout/base';
@import './vendors/hooper';

**brand-theme.scss （在我项目的根目录中） **

$primary:    238, 121, 61;
$secondary:  146, 74, 139;

【问题讨论】：

标签： sass nuxt.js less tailwind-css postcss

【解决方案1】：

在:root 范围内，您需要插入变量，如我之前的答案所示：https://stackoverflow.com/a/68986443/8816585

这样

--color-primary: #{$primary};

【讨论】：