Компонент Blazor изолированный css с попутным ветром/postcss

Можно ли использовать синтаксис 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.

Итак... есть идеи, возможно ли это?

Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare
Как развернуть сайты с помощью Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
7
0
1 893
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, это возможно! Протестировано с .NET 5.0

Вам нужно создать новый проект npm в корневом каталоге проектов.

  1. Используйте npm init, чтобы создать новый проект npm.
  2. Добавьте зависимости tailwind и postcss с помощью npm i -D postcss-cli autoprefixer postcss tailwindcss
  3. Добавляем конфиг для postcss
// postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}
  1. Добавьте tailwind.config.js в проект с помощью npx tailwindcss init. При необходимости вы можете заменить свойство очистки, чтобы удалить неиспользуемые классы CSS. Но это было немного ошибочно в моих тестах, когда я использовал библиотеку Razor.
// tailwind.config.js
purge: {
    enabled: true,
    content: [
        './**/*.html',
        './**/*.razor',
        './**/*.razor.css'
    ],
},
  1. Добавьте скрипт сборки 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>

Я не уверен, почему путь отличается, я не могу найти к нему никакой документации. Если кто-то знает больше, не стесняйтесь ответить.

Если есть что-то, что не имеет смысла или может быть сделано лучше, пожалуйста, дайте мне знать!

Большое спасибо за ваш вклад в это, он отлично работает при использовании стандартного веб-проекта Blazor без библиотеки компонентов или при прямой компиляции библиотеки компонентов. Однако я думаю, что есть проблема, когда веб-проект ссылается на библиотеку компонентов. Кажется, в самой первой строке CSS, скомпилированного из библиотеки компонентов, есть @import '';, что, я думаю, сбивает с толку процесс postcss, есть идеи? еще раз спасибо

CT14.IT 28.01.2021 09:38

Я только начинаю, но, похоже, это работает и для .NET 6! Я заменил net5.0 на $(TargetFramework), чтобы сделать его более агностическим.

Oskar 22.10.2021 21:14

Другие вопросы по теме