顺风在规则中添加@顺风css,标记为未知。 如何避免这种错误?
如styles.css
@tailwind起飞前的;
@tailwind公用事业;
顺风在规则中添加@顺风css,标记为未知。 如何避免这种错误?
如styles.css
@tailwind起飞前的;
@tailwind公用事业;
当前回答
现在vscode是可配置的,为了消除这个警告,你可以创建一个名为"。vscode"的文件夹 然后创建一个名为settings。json的新文件 在设置中。Json文件你可以粘贴这个Json
{ “css.lint。unknownAtRules”:“忽略” }
其他回答
确保安装PostCSS语言支持,在VSCODE中找到扩展。 这将删除正在显示的错误。
@apply规则兼容postCSS: https://github.com/tailwindcss/tailwindcss/issues/325
VS市场链接:https://marketplace.visualstudio.com/items?itemName=csstools.postcss
注意:从VS Code中卸载PostCSS智能感知和高亮扩展,否则它将无法工作。
这是vscode内置列表提供的at-rule-no-unknown规则。
为了摆脱它,你需要做以下事情:
1. 安装styelint扩展代码——Install -extension styelint . vcode - styelint
2. 安装styelint推荐配置
3.在vscode USER SETTINGS中添加这两行
"css.validate": false, // Disable default css built-in lint
"stylelint.enable": true, // Enable stylelint
"scss.validate": false, // Disable scss lint (optional if using scss)
4. 将这些行粘贴到项目根目录中名为.stylelintrc的文件中,如果它不存在,则创建它。更多关于stylelint配置的信息请访问这个链接:https://stylelint.io/user-guide/
{
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [ true, {
"ignoreAtRules": [
"extends",
"tailwind"
]
}],
"block-no-empty": null,
"unit-allowed-list": ["em", "rem", "s"]
}
}
如果顺风css不像未知规则引起的错误那样工作,你需要重新构建它。例如,如果你已经在本地环境中运行了npm run dev,你可以用ctrl + c退出并再次运行npm run dev来创建一个正常的纯CSS文件,这将使顺风CSS工作。
这正是我所遇到的问题以及我是如何解决它的。
根据tailwindcss-intellisense github库:
VS代码推荐设置
files.associations
使用这些文件。associations设置告诉VS Code总是在顺风CSS模式下打开。CSS文件:
"files.associations": {
"*.css": "tailwindcss"
}
它修复了@顺风警告,并增加了顺风指令,功能的智能感知
关于tailwindcss智能感知扩展的更多信息可以找到 在github存储库
我的建议是安装postCSS语言支持,然后重命名tailwind.css为tailwind。然后PCSS更改包中的引用。Json脚本(或任何构建脚本你正在使用顺风)顺风。PCSS从顺风。css和一切应该工作正常。
@apply规则兼容postCSS: https://github.com/tailwindcss/tailwindcss/issues/325