next.js 在TailwindCSS中有条件地导入CSS文件

83qze16e  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(301)

目前我导入一个静态的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?

avkwfej4

avkwfej41#

我为自己找到了一个解决办法。通过基于highlight.js生成样式,并与tailwindcss及其黑暗主题兼容。
在这里写https://octocat.dev/posts/conditionally-styling-code-sections

相关问题