顺风:如何在nuxt2中使用@apply自定义类？

Question

我正在Nuxt.js 2中的自定义类上尝试使用Nuxt.js

nuxt.config.js

export default {
    buildModules: [
        '@nuxtjs/tailwindcss',
    ],
    tailwindcss: {
        cssPath: '~/assets/app.css',
        exposeConfig: true
    }
}

assets/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .btn {
        @apply border-2 p-2 font-bold;
    }
}

在任何vue单文件或任何其他scss文件中。

<style lang="scss">
    .btn-lg {
        @apply btn;
    }
</style>

​

​

btn类不存在。如果您确信btn存在，请确保在Tailwind看到您的CSS之前，所有@import语句都被正确处理，因为@apply只能用于同一CSS树中的类。

因此，在处理使我的自定义类在@apply**?**中工作之前，如何使我的自定义样式在Tailwind中被看到

我尝试了以下问题和文档中的解决方案

• 添加-自定义实用程序
• 无法在scss文件中使用自定义类吗？

但它们都不起作用

我正在使用：

• 2.2.19 @nuxtjs/tailwindcss
• Nuxt.js 2.15.8

非常感谢您的回复！

Answer 1

正如我在注释中提到的，添加一个mode: "jit"可以解决这个问题。

tailwind.config.js

module.exports = {
    mode: 'jit'
}

这是个很好的香草溶液。

但是，如果您像我一样在虚拟机(Homestead)中对项目进行编程，这可能会导致一个错误，即节点无法重新编码您的css/scss/sass文件的更改。

所以还有两种解决方案：

1. 使用纯tailwindcss而不是@nuxtjs/tailwindcss 只需跟随文档：用Nuxt.js安装尾风CSS
2. 在plugin()中使用tailwind.config.css module.exports ={ // .清洗主题变体..。插件:plugin(函数({ addUtilities，postcss }) { const = fs.readFileSync('./your-custom-style-file-path'，'utf-8') addUtilities(postcss.parse( css ).nodes })，，} 来自github

但更重要的是，这一解决方案也不能重新考虑这些变化。所以在nuxt.config.js中添加css/scss/sass文件(我使用的是nuxt-vite)

vite: {
    plugins: [
        {
            name: 'watch-external', // https://stackoverflow.com/questions/63373804/rollup-watch-include-directory/63548394#63548394
            async buildStart(){
                const files = await fg(['assets/**/*']);
                for(let file of files){
                    this.addWatchFile(file);
                }
            }
        }
    ]
}