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.config.js 中的标准颜色。当我尝试扩展颜色时,所有其他颜色都被删除