带有尾风/postcss 的 Blazor 组件隔离 css

Question

是否可以对 blazor 组件隔离 css 使用 tailwind 和 postcss 语法？

我真的很喜欢 Tailwind 作为 CSS 框架，特别是它使用 postcss 和 @apply 功能，您可以将 tailwinds css 组件捆绑到一个单独的类中。

例如

.some-button {
    @apply px-4 py-2 bg-blue-400 text-white
}

我一直在考虑使用 Svelte，因为它同时提供 CSS 隔离和 postcss @apply 语法。然而，既然 Blazor 支持独立的 CSS，我真的很想更进一步，并能够从组件 CSS 中编写 postcss 样式。

那么...你知道这是否可能吗？

Answer 1

是的，有可能！ 使用 .NET 5.0 测试

您必须在项目根目录中创建一个新的 npm 项目。

1. 使用npm init 创建一个新的 npm 项目。
2. 用npm i -D postcss-cli autoprefixer postcss tailwindcss添加tailwind和postcss的依赖
3. 为 postcss 添加配置

// postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}

4. 使用npx tailwindcss init 将tailwind.config.js 添加到项目中。 如果需要，您可以替换 purge 属性以删除未使用的 css 类。 但是当我使用 Razor 库时，这在我的测试中有点错误。

// tailwind.config.js
purge: {
    enabled: true,
    content: [
        './**/*.html',
        './**/*.razor',
        './**/*.razor.css'
    ],
},

5. 将 post-css 构建脚本添加到您的 .csproj 文件中。这将在每次构建后将 postcss 规则应用于 Blazor 捆绑的样式表。

对于 Blazor 项目：

<Target Name="PostBuild" AfterTargets="PostBuildEvent">
    <Exec Command="npx postcss $(ProjectDir)obj\$(ConfigurationName)\net5.0\scopedcss\bundle\$(ProjectName).styles.css -r" />
</Target>

对于 Blazor 组件库：

<Target Name="PostBuild" AfterTargets="PostBuildEvent">
    <Exec Command="npx postcss $(ProjectDir)obj\$(ConfigurationName)\net5.0\scopedcss\projectbundle\$(ProjectName).bundle.scp.css -r" />
</Target>

我不确定路径为何不同，我找不到任何文档。如果有人知道更多，请随时回复。

如果有什么不合理或可以做得更好的地方，请告诉我！