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

布满荆棘的人生 2022-09-05 01:43 478阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

怎么取消这个警告呢？

## 安装 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 安装两个扩展。

*  [Stylelint][Stylelint 1]
 *  [Tailwind CSS Intellisense][]

## 调整 Visual Studio Code 设置 ##

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

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

最终的结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1][] @apply下面的警告消失

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20220829/e1e8cd9d9957458484aebe9f20d9bff3.png
[Stylelint]: https://stylelint.io/
[Stylelint 1]: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
[Tailwind CSS Intellisense]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1]: /images/20220829/9dc99ba1d86b42b4bcacbc145ec4a6f5.png