Компонент 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.

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

[РЕШЕНО]Перейти к решению

1 893

Blazor1413 вопросов Tailwind css724 вопроса Postcss109 вопросов

Ответ:

Решено

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

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

Используйте npm init, чтобы создать новый проект npm.
Добавьте зависимости tailwind и postcss с помощью npm i -D postcss-cli autoprefixer postcss tailwindcss
Добавляем конфиг для postcss

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

Добавьте tailwind.config.js в проект с помощью npx tailwindcss init. При необходимости вы можете заменить свойство очистки, чтобы удалить неиспользуемые классы CSS. Но это было немного ошибочно в моих тестах, когда я использовал библиотеку Razor.

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

Добавьте скрипт сборки 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 с попутным ветром/postcss

Ответ:

Интересные вопросы для изучения