README

一个用于轻松压缩样式并利用sass、less等在你的blade组件中使用的包。

<button class="btn">{{ $slot }}</button>

<x-style lang="css">
.btn{
    height: 2rem;
    line-height: 2rem;
    border-radius:3px;
}
</x-style>

介绍

一些JavaScript框架（例如 Vue）引入了一种架构，其中样式和HTML标记可以写在同一个文件中。这种设计模式简化了前端开发的工作流程。

使用blade样式，在处理样式时无需运行编译器。此外，只包含所需blade组件的样式。这可以避免加载大型CSS文件，并将大小减小到最小。

编译器

目前有一个用于blade样式的Sass编译器。如果您想为Less或Stylus构建编译器，可以使用Sass包作为示例。

Blade Style Sass

安装

此包可以通过composer轻松安装。

composer require cbl/blade-style

现在必须发布必要的资产。这包括style.php配置文件和存储编译后样式的存储文件夹。

php artisan vendor:publish --provider="BladeStyle\ServiceProvider"

包含样式

blade组件x-styles包含所有必需的样式，因此它可以放置在头部。

<head>
    ...

    <x-styles />
</head>

用法

每个blade视图可以包含恰好一个x-style组件。然后，您的样式可以像这样写在包装器内。

<img src="http://lorempixel.com/400/200/" class="my-image"/>

<x-style lang="css">
.my-image{
    border: 1px solid #ccc;
    border-radius: 3px;
}
</x-style>

您可以构建可重用的blade组件

<button class="btn">{{ $slot }}</button>

<x-style lang="css">
.btn{
    height: 2rem;
    line-height: 2rem;
    border-radius:3px;
}
</x-style>

Sass

您可以在lang属性中设置CSS扩展语言，如下所示

<button class="btn">My Button</button>

<x-style lang="scss">
    $color: purple;

    .btn{
        background: $color;
    }
</x-style>

优化样式

Blade styles与Views具有相同的行为。如View文档中建议，可以将style:cache命令添加到您的部署工作流程中，以确保所有样式都已编译，从而提高性能。

php artisan style:cache

您可以使用style:clear命令清除样式缓存

php artisan style:clear

cbl / blade-style

维护者

详细信息

README

介绍

编译器

安装

包含样式

用法

Sass

优化样式