目前我正在导入一个静态css主题用于语法高亮显示,如:
import 'highlight.js/styles/github.css'
因为我使用的是tailwindcss和nextjs,而不是静态导入,我想根据黑暗模式有条件地导入highlight.js css文件。
基本上我需要一个tailwindcss版本的以下代码:
if(darkmode)
import 'highlight.js/styles/github-dark.css'
else
import 'highlight.js/styles/github.css'
我尝试了下面的插件代码,没有效果
plugins: [
plugin(function ({ matchVariant, addBase }) {
matchVariant('dark', (v) => {
addBase(
[
`@import 'highlight.js/styles/github-dark.css';`
]);
})
}),
]
似乎我错过了一些基本的东西,因为我认为有条件地导入CSS文件将是tailwindcss中的一个选项?
我为自己找到了一个解决方法。通过生成基于highlight.js的样式,并与tailwindcss及其dark主题兼容。
在这里写博客https://octocat.dev/posts/conditionally-styling-code-sections