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

Posted

技术标签:

【中文标题】Nuxt 项目中的 Tailwind CSS 尝试使用 SCSS 变量会引发“未知单词”错误【英文标题】:Tailwind CSS in Nuxt project trying to use SCSS variable throws "Unknown word" error 【发布时间】: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;

【问题讨论】:

【参考方案1】:

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

这样

--color-primary: #$primary;

【讨论】:

以上是关于Nuxt 项目中的 Tailwind CSS 尝试使用 SCSS 变量会引发“未知单词”错误的主要内容,如果未能解决你的问题,请参考以下文章

Tailwind CSS Nuxt 禁用清除选项在生产中引发错误

Nuxt s-s-r 设置导致 Tailwind 媒体查询崩溃

如何在 vercel zeit 上使用 Tailwindcss 2.0 部署 nuxt.js 项目

使用 Tailwind 对 Nuxt 进行 Cypress 组件测试

Tailwind CSS - 项目之间的垂直空间

Tailwind CSS 扩展了 tailwind.config.js 中的标准颜色。当我尝试扩展颜色时,所有其他颜色都被删除