Можно ли использовать синтаксис tailwind и postcss для компонента blazor, изолированного css?
Мне очень нравится Tailwind как CSS-фреймворк, особенно его использование postcss и функциональность @apply
, где вы можете объединять компоненты tailwinds css в отдельный класс.
например
.some-button {
@apply px-4 py-2 bg-blue-400 text-white
}
Я рассматривал возможность использования Svelte, потому что он предлагает как изоляцию CSS, так и синтаксис postcss @apply. Однако теперь, когда Blazor поддерживает изолированный CSS, я действительно хотел бы сделать небольшой шаг вперед и иметь возможность писать стили postcss из компонентного CSS.
Итак... есть идеи, возможно ли это?
Да, это возможно! Протестировано с .NET 5.0
Вам нужно создать новый проект npm в корневом каталоге проектов.
npm init
, чтобы создать новый проект npm.npm i -D postcss-cli autoprefixer postcss tailwindcss
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
npx tailwindcss init
.
При необходимости вы можете заменить свойство очистки, чтобы удалить неиспользуемые классы CSS. Но это было немного ошибочно в моих тестах, когда я использовал библиотеку Razor.// tailwind.config.js
purge: {
enabled: true,
content: [
'./**/*.html',
'./**/*.razor',
'./**/*.razor.css'
],
},
Для проектов 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>
Я не уверен, почему путь отличается, я не могу найти к нему никакой документации. Если кто-то знает больше, не стесняйтесь ответить.
Если есть что-то, что не имеет смысла или может быть сделано лучше, пожалуйста, дайте мне знать!
Я только начинаю, но, похоже, это работает и для .NET 6! Я заменил net5.0
на $(TargetFramework)
, чтобы сделать его более агностическим.
Большое спасибо за ваш вклад в это, он отлично работает при использовании стандартного веб-проекта Blazor без библиотеки компонентов или при прямой компиляции библиотеки компонентов. Однако я думаю, что есть проблема, когда веб-проект ссылается на библиотеку компонентов. Кажется, в самой первой строке CSS, скомпилированного из библиотеки компонентов, есть
@import '';
, что, я думаю, сбивает с толку процесс postcss, есть идеи? еще раз спасибо