英文:
"Unused CSS selector" when using a SASS themify mixin with Svelte and Vite:
问题
我正在尝试使用Svelte创建一个小型Web应用程序。
其中一个要求是能够根据需要更改应用程序的“主题”,例如暗主题、亮主题、高对比度等。
我一直在使用在线的mixin代码片段来帮助我实现这一点 -
https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1
然而,这不一致地工作,我经常会遇到错误,例如:
[vite-plugin-svelte] /path/to/svelte/component.svelte:61:0 未使用的CSS选择器“main.default-theme div.some.element.identification”
尽管选择器已被使用,并且正在接收其非主题属性。
在themes.scss
文件中:
@mixin themify($themes) {
@each $theme,
$map in $themes {
main.#{$theme}-theme & {
$theme-map: () !global;
@each $key,
$submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function themed($key) {
@return map-get($theme-map, $key);
}
$themes: (
default: (
strokeColor: green,
fillColor: red,
),
);
以及在另一个导入themes.scss
的scss文件中:
div.some.element.identification {
some-non-themed-attribute: some-value;
@include themify($themes) {
stroke: themed('strokeColor');
fill: themed('fillColor');
}
}
现在的关键是,使用这种方法时,某些元素会接收其适当的主题属性,而其他元素则不会。
我还看到以下错误:
[vite-plugin-svelte] /path/to/svelte/component.svelte:61:0 未使用的CSS选择器“main.default-theme div.some.element.identification”
问题似乎不在于CSS选择器 - 因为不会接收主题属性的元素仍然在相同的CSS子句中仍然接收其他非主题属性。
最后两个观察结果 -
- 当我构建项目(使用vite build)时,我可以看到创建的css资源文件不包括缺少其主题属性的css选择器。
- 当我使用开发工具来定位所谓未使用的选择器(其主题属性不在其中)时,它们可以找到 - 尽管有错误消息。
我已经尝试了不同的方法来解决这个问题,但没有一种方法能够一致工作。
提前感谢您的帮助!
英文:
I'm trying to create a small web application using Svelte.
One of the requirements is to be able to change the application "theme" on demand, for example - dark theme, light theme, high contrast, and so on.
I've been using an online mixin snippet to help me with that -
https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1
However, this doesn't work consistently, and I often get errors like:
[vite-plugin-svelte] /path/to/svelte/component.svelte:61:0 Unused CSS selector "main.default-theme div.some.element.identification"
even tho the selector is used and is receiving it's non-themed attributes.
Inside a themes.scss
file:
@mixin themify($themes) {
@each $theme,
$map in $themes {
main.#{$theme}-theme & {
$theme-map: () !global;
@each $key,
$submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function themed($key) {
@return map-get($theme-map, $key);
}
$themes: (
default: (
strokeColor: green,
fillColor: red,
),
);
and inside another scss file that is importing themes.scss
:
div.some.element.identification {
some-non-themed-attribute: some-value;
@include themify($themes) {
stroke: themed('strokeColor');
fill: themed('fillColor');
}
}
now the punchline - when using this methodology, some elements are receiving their appropriate themed attributes, and others dont.
I am also seeing the following error:
[vite-plugin-svelte] /path/to/svelte/component.svelte:61:0 Unused CSS selector "main.default-theme div.some.element.identification"
the issue doesn't seem to be in the css selectors - since the elements that dont receive the themed attributes, still receive the other non-themed attributes in the same css clause.
Two final observations -
- When I'm building the project (using vite build), I can see that the css asset file being created doesn't include the css selectors that are missing their themed attributes.
- When i'm using the devtools to locate the supposedly unused selectors (whose themed attributes are not present), they can be found - despite the error message.
I've been trying different way to solve this issue and nothing works consistently.
Thank you in advance for your help!
答案1
得分: 0
你可以尝试检查这些不同的项目:
- 如果你使用svelte-preprocess,请尝试将
scss: { prependData: `@import 'src/styles/theme.scss';` }
或者你的主题路径添加到配置对象中。 - 如果仍然不起作用,也许可以尝试用vite-preprocess替换svelte-preprocess。
- 禁用任何可能的CSS清除插件。
英文:
You could try checking these different items:
- If you use svelte-preprocess, try to add
scss: { prependData: `@import 'src/styles/theme.scss';` }
or whatever the path to your theme is, to the config object. - If it still does not work, maybe try to swap svelte-preprocess with vite-preprocess
- Disable any potential css purge plugin
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论