Closed MoeHero closed 3 months ago
看上去这是一个uni app vue3 vite项目,请问这个 center 这个类是如何定义的呢?定义在插件里面,还是定义在普通的 css 里面。
最好能提供一个能复现的 demo,不然这种偶发性问题还是挺难排查的。
在 src/styles/index.scss
里,相关片段如下
@layer utilities {
.center {
@apply flex justify-center items-center;
}
}
这个文件在 App.vue 里引用的,相关片段如下
<style lang="scss">
@import './styles/index.scss';
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
至于能复现的 demo 我没写过,而且不知道拿出去的话会不会出问题,现在是公司的项目里报错,而且多重新编译几次就好了 之前一直没处理这个事情,现在想上 ci,如果因为这个问题导致编译失败就有点难搞
我试了一下,暂时没复现,猜想不知道会不会和这个有关系: https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
我看教程里的 @layer 都是定义在:
@tailwind base;
@tailwind components;
@tailwind utilities;
下方的
https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes
我发现直接在 App.vue 里写 @layer utilities
好像一直是正常的,但 import
的就会有问题
而且好像只有 center
这个类有问题,其他的类好像都是正常的没报错,很奇怪
Update: 刚刚又跑了一次,直接写在 App.vue 里也会报错
那我推荐你注册这样一个 tailwindcss/plugin
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function ({ addUtilities }) {
addUtilities({
'.center': {
display: 'flex',
'align-items': 'center',
'justify-content': 'center'
}
})
})
]
}
这样做,性能比 @apply
要好,同时vscode
插件能感知到这个 class
来产生智能提示,可能还能规避你这个报错问题。
改完之后 cneter
不报错了,然后 @layer utilities
的另一个类又报错了...
有可以稳定复现的 repo 吗,或者都写到插件里,不用 @layer utilities 呢,哈哈
我晚点忙完试试看能不能分离出来一个 demo 试试看,现在有点忙,而且项目是公司的不太方便公开
长期没有回复,先 Close 了,有复现或者还是遇到这个问题再 reopen 吧
描述这个Bug 偶尔会出现报错如下 [plugin:vite:css] [postcss] path/to/src/Component.vue?vue&type=style&index=0&scoped=68ebadeb&lang.scss:39:3: The
center
class does not exist. Ifcenter
is a custom class, make sure it is defined within a@layer
directive.重新编译几次之后又会正常
如何重现
运行环境