Nuxt 项目中的 Tailwind CSS 尝试使用 SCSS 变量抛出 "Unknown word" 错误

Question

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

的 tailwind.scss 文件中

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

postcss-custom-properties: Unknown word

对我来说，这不是错误，因为我正在使用支持变量的 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;

Answer 1

在 :root 范围内，您需要插入变量，如我之前的回答所示：

像这样

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

Nuxt 项目中的 Tailwind CSS 尝试使用 SCSS 变量抛出 "Unknown word" 错误

Tailwind CSS in Nuxt project trying to use SCSS variable throws "Unknown word" error

sass

less

postcss

nuxt.js

tailwind-css