如何解决出现Unknown at rule @applyscss(unknownAtRules)警告？

最新推荐文章于 2024-11-18 22:15:46 发布

住在河边的程序猿

最新推荐文章于 2024-11-18 22:15:46 发布

阅读量1.9w

点赞数 3

分类专栏： css nuxt

本文链接：https://blog.csdn.net/sinat_36728518/article/details/119733197

版权

css 同时被 2 个专栏收录

14 篇文章

订阅专栏

nuxt

11 篇文章

订阅专栏

在Nuxt框架中使用Tailwindcss时遇到@apply警告？通过安装和配置Stylelint可以解决。步骤包括安装Stylelint及预设配置，创建stylelint.config.js文件并设定规则忽略@apply等。同时，为Visual Studio Code安装相关扩展，并调整设置以禁用内置CSS验证。按照这些步骤操作后，@apply警告将不再显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在nuxt框架当中使用tailwindcss出现：@apply下面出现警告

怎么取消这个警告呢？

安装 Stylelint

首先，我们需要安装Stylelint本身和一个包含合理标准配置的包。

npm install --save-dev stylelint stylelint-config-standard

在使用nuxt创建项目的时候，如果Stylelint已经安装了，就不用重复安装了

创建 Stylelint 配置

将stylelint.config.js使用以下内容命名的文件放入项目的根文件夹中。

module.exports = {
  extends: ["stylelint-config-standard"],
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null,
  },
};

安装 Visual Studio Code 扩展

接下来，您需要为 Visual Studio Code 安装两个扩展。

调整 Visual Studio Code 设置

最后，您必须将这三行settings.json代码放入您的 Visual Studio Code 中。它们禁用所有内置 CSS 验证。这些现在由 Stylelint 处理。

"css.validate": false,
"less.validate": false,
"scss.validate": false

最终的结果

@apply下面的警告消失