程序员经验分享-hwhale

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

2023-11-19

在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下面的警告消失

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

nuxt

如何解决出现Unknown at rule @applyscss(unknownAtRules)警告？ 的相关文章

  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s

  • Firefox 和 Chrome 为 offsetTop 提供了不同的值

    我试图相对于输入字段定位一个跨度元素 让我们称之为 工具提示跨度 为此 我将工具提示跨度和输入字段包装在另一个跨度元素中 我们称之为 包装器跨度 该元素具有position relative 然后我设置position absolute在工

  • javascript：获取带有单位的CSS prop值[重复]

    这个问题在这里已经有答案了 我的代码是这样的 image 1 position absolute top 3vw 我的尝试 http jsfiddle net z8k6t3fb 1 http jsfiddle net z8k6t3fb 1

  • 使用仅 CSS 菜单正确显示第三层子菜单

    我正在开发一个新网站 并且 css 菜单遇到问题 通过示例更容易解释 这是该网站的链接 http www webau net CSFF index asp http www webau net CSFF index asp 在 Home 父

  • css border-shadow 是否会增加元素的大小[重复]

    这个问题在这里已经有答案了 可能的重复 css box shadow 是元素盒子模型的一部分吗 https stackoverflow com questions 7036498 is css box shadow part of elem

  • 滚动在 chrome 中的 svg 异物内不起作用

    我在 svg 异物中有 div 带有溢出 auto 滚动仅适用于鼠标滚轮 无法拖动栏 它适用于 Firefox 但不适用于 chrome safari 如果 svg g 元素上没有转换 它就可以工作 参见小提琴 http jsfiddle

  • 图像上的文本和背景颜色叠加

    我正在尝试创建一个与图像大小完全匹配的纯色叠加层 并在该叠加层上显示文本 如果可能的话 我想仅使用 HTML 和 CSS 来完成此操作 图像可以是任何大小 并且将调整大小以适合其父容器并居中 像这样的东西 不起作用 HTML div cla

  • CSS 双边框，外边框比内边框粗

    在我目前的工作中 我需要在容器上生成双边框 边框样式 双 实现这一点 但是我的客户希望外边框更厚 内边框具有正常厚度 除了创建 2 个 div 其中 1 个嵌套在另一个 div 中 外部 div 具有更大的厚度 或者通过使用边框图像 还有什

  • 如何使用滚动条图像？

    如何使用 HTML CSS 替换滚动条的图像 I have scrollbar base color 00acee scrollbar dark shadow color 00acee scrollbar track color fffff

  • 强制 Flexbox 在特定项目之后换行（方向：列）

    我有导航 各个条目通过 Flexbox 一层一层地显示 方向 列 如果导航条目获得 分隔符 类 则导航应进入下一行 是否可以强制 Flexbox 执行 换行 nav display flex flex direction column na

  • 清理 CSS 抖动

    我已经构建了这些圆圈 当鼠标悬停时它们会扩展边框 我现在遇到的唯一问题是有时圆圈会抖动 摇晃 当我设置transition all 1s ease in out 超过 0 2 秒 有解决这个问题的方法吗 还是事情就是这样 这是其中的代码Js

  • CSS“概述”Webkit 和 Gecko 上不同的行为行为

    我正在做一个实验 我发现 轮廓 CSS2 属性在 Webkit 和 Gecko 上的实现方式不同 在下面的脚本中 我有一个绝对位置 div 在另一个 div 内 但浮动在其外部 Webkit 上的轮廓概述了实际的父 div 而在 Gecko

  • contenteditable 在 safari 中不起作用，但在 chrome 中起作用

    我有一个奇怪的问题 这在 chrome 中按预期工作 但在 safari 中它只会发光 但不会对按键输入做出反应 这是触发文本版本的方法 var namebloc event currentTarget find column filena

  • 盒子大小是否可在电子邮件模板中使用

    我正在创建电子邮件模板 我发现了这个CSS 支持指南 https www campaignmonitor com css but box sizing不在那儿 我想知道是否支持该 CSS 属性 如果支持 哪些电子邮件客户端支持它 不 不支持

  • IE8 底部：0 在位置：绝对的行为类似于位置：固定

    我有一个 DIV 必须始终位于页面的底部 左侧 类似于页脚菜单 div bottom menu position absolute z index 1 left 0 bottom 0 width 90 我的页面定义了最小高度 当用户将其缩小

  • jQuery 面板滑块通过单击按钮打开但不会关闭

    我的页面上有一个按钮 可以使用 jquery 和 Modernizr 框架打开右侧面板 按钮位于屏幕最右侧 单击时 它会向左滑动并打开打开的面板 问题是 再次单击时它不会滑回到原来的位置 HTML div class cd panel fr

  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中

  • 处理 iPhone X 系列上 Chrome 浏览器中的安全区域

    对于我管理的网站 我正在使用新的 iPhone X 系列屏幕安全区域safe area inset

  • 如何在 Bootstrap 4 轮播中堆叠多个图像

    我不知道如何使用 Bootstrap 4 以及如何在一张幻灯片中显示多个小图像 例如缩略图 而不是让图像填充轮播的宽度 我已经使用下面的代码尝试了一些操作 但仍然无法堆叠很多图像 div class container h2 class t

  • 更改 CSS 样式表的选择器属性

    以下是我们传统上如何更改重复元素的样式 将样式应用到每个元素 function changeStyle selector prop val var elems document querySelectorAll selector Array

随机推荐

热门标签