请问有没有项目实践案例？

[miaojinsing]

Clear and concise description of the problem

我在开发过程，基本是less + css module 模块化开发 混用@apply语法 这为了保持主题和风格统一很有用，请问这值得推荐吗？用的是vite + react-ts ，按照官方在开发过程中发现重复加载很多冗余的css 代码，导致浏览器调试卡顿变得很困难，而且在jsx中使用[@unocss/preset-attributify]是非常不建议的行为 ，我想移除这个preset 但配置飘红。

另外再vs code 开启unocss 插件 占用内存比较高

Suggested solution

针对以上请给我们一些专业建议

Alternative

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README.md of using the package.
• Already used the Interactive Docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[miaojinsing]

我目前使用unocss 开发移动端 ，使用的是谷歌浏览器进项调式开发 卡顿到 无法点击元素查看属性

[Simon He]

Please provide the mini repo

[miaojinsing]

Please provide the mini repo

vite + react-ts + less

import {
defineConfig,
presetTypography,
presetUno,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'

const cfg = defineConfig({
content:{
filesystem:[
"./index.html",
"./src//*.{js,ts,jsx,tsx}",
"./src/packages/components//.{js,ts,jsx,tsx}",
"./src/packages/layout/**/.{js,ts,jsx,tsx}",
]
},
shortcuts: [
// ...
{ "text-md":'text-base'},

],
theme: {
colors: {
"primary":"#3432bf",
"primary-1":"#f3f0ff",
"primary-2":"#dedaf2",
"primary-3":"#b1aae6",
"primary-4":"#857ed9",
"primary-5":"#5c56cc",
"primary-7":"#202299",
"primary-8":"#121773",
"primary-9":"#080e4d",
"primary-10":"#040826"
},
fontSize:{
'xs':"0.625rem",
'sm':"0.75rem",
'base':"0.875rem",
"lg":"1rem",
"xl":"1.2rem"
},

spacing: {
  sm: '0.5rem',
  md: '0.75rem',
  lg: '1rem',
  xl: '1.5rem',
},
breakpoints: {
  sm: '320px',
  md: '640px',
}

},
presets: [
presetUno({
variablePrefix:"mii-",
}),
presetTypography({

}),

],
transformers: [
transformerDirectives({
applyVariable:"--mii"
}),
transformerVariantGroup(),
],

}) as any

export default cfg

[miaojinsing]

.filter-item{
&::after{
position: absolute;
content: "";
@apply b-r-2 b-r-gray-6 b-b-2 b-b-gray-6 b-2 border-transparent right-0.5 bottom-0.5;
}

@apply block bg-gray-2/80 text-gray-6 text-md w-10 max-w-15 py-1 px-2 rounded-1 leading-none truncate relative;

}
我常常这样使用 请问这种写法推荐吗

[Simon He]

.filter-item{ &::after{ position: absolute; content: ""; @apply b-r-2 b-r-gray-6 b-b-2 b-b-gray-6 b-2 border-transparent right-0.5 bottom-0.5; }

@apply block bg-gray-2/80 text-gray-6 text-md w-10 max-w-15 py-1 px-2 rounded-1 leading-none truncate relative;

} 我常常这样使用 请问这种写法推荐吗

Nested CSS is currently not handled well. It is not recommended to use it
related：#3835，#3573

[Anthony Fu]

We temporarily closed this due to the lack of enough information. We could not identify whether it was a bug or a userland misconfiguration with the given info.
Please provide a minimal reproduction to reopen the issue.
Thanks.

Why reproduction is required

[miaojinsing]

.filter-item{ &::after{ position: absolute; content: ""; @apply b-r-2 b-r-gray-6 b-b-2 b-b-gray-6 b-2 border-transparent right-0.5 bottom-0.5; }
@apply block bg-gray-2/80 text-gray-6 text-md w-10 max-w-15 py-1 px-2 rounded-1 leading-none truncate relative;
} 我常常这样使用 请问这种写法推荐吗

Nested CSS is currently not handled well. It is not recommended to use it related：#3835，#3573

我用less 他是起作用的 但我听从您的建议 ，right-0.5 会转换成 right-0 这是什么原因 我在vscode 中得到了有值的提示 有很多地方都是非整数都会转成最小整数，我该如何解决

[Simon He]

.filter-item{ &::after{ position: absolute; content: ""; @apply b-r-2 b-r-gray-6 b-b-2 b-b-gray-6 b-2 border-transparent right-0.5 bottom-0.5; }
@apply block bg-gray-2/80 text-gray-6 text-md w-10 max-w-15 py-1 px-2 rounded-1 leading-none truncate relative;
} 我常常这样使用 请问这种写法推荐吗

Nested CSS is currently not handled well. It is not recommended to use it related：#3835，#3573

我用less 他是起作用的 但我听从您的建议 ，right-0.5 会转换成 right-0 这是什么原因 我在vscode 中得到了有值的提示 有很多地方都是非整数都会转成最小整数，我该如何解决

You can use dynamic values like right-[10px]

[miaojinsing]

.filter-item{ &::after{ position: absolute; content: ""; @apply b-r-2 b-r-gray-6 b-b-2 b-b-gray-6 b-2 border-transparent right-0.5 bottom-0.5; }
@apply block bg-gray-2/80 text-gray-6 text-md w-10 max-w-15 py-1 px-2 rounded-1 leading-none truncate relative;
} 我常常这样使用 请问这种写法推荐吗

Nested CSS is currently not handled well. It is not recommended to use it related：#3835，#3573

我用less 他是起作用的 但我听从您的建议 ，right-0.5 会转换成 right-0 这是什么原因 我在vscode 中得到了有值的提示 有很多地方都是非整数都会转成最小整数，我该如何解决

You can use dynamic values like right-[10px]

我正是为了保持Rem尺寸的风格统一才用@apply 如此的话我就不用unocss 语法了

[Simon He]

right-0.5 will not be converted to right-0. There is no minimized demo, but it is possible that you are using nested css. Because there is a problem with the matching support of css-tree, it is very likely that the reading will be incomplete or wrong, so I suggest you modify nested css and then see if it exists.

[Simon He]

right-0.5 will not be converted to right-0. There is no minimized demo, but it is possible that you are using nested css. Because there is a problem with the matching support of css-tree, it is very likely that the reading will be incomplete or wrong, so I suggest you modify nested css and then see if it exists.

[miaojinsing]

right-0.5 will not be converted to right-0. There is no minimized demo, but it is possible that you are using nested css. Because there is a problem with the matching support of css-tree, it is very likely that the reading will be incomplete or wrong, so I suggest you modify nested css and then see if it exists.

Thank you for your patient answer