像 Vue 组件一样使用 Blade 中作用域的 SCSS

Posted 2023-03-14

【中文标题】像 Vue 组件一样使用 Blade 中作用域的 SCSS

【英文标题】：Using SCSS scoped in Blade like Vue components

【发布时间】：2021-04-01 22:50:24

【问题描述】：

我同时使用 Laravel 8 和 Vue.js。所以我正在开发一个包含 Blade 和 Vue 组件的网站。 我想要在特定的 Blade 模板中添加 scss 代码。就像一个 Vue 组件：

// Vue component example
<template>
...
</template>
<script>
...
</script>

<style lang="scss" scoped>
// SCSS codes scoped here
</style>

我想要与 Blade 中的 <style lang="scss" scoped> 完全一样的东西。 谢谢。

【参考方案1】：

您可以使用刀片 @stack 和 @push

在layout.blade.php

@stack('css')

在特定的.blade.php 中

@push('css')
<style>
</style>
@endpush

当specific.blade.php 加载时就像这样，那么只有css 会加载到与vue scoped 相同的布局中

参考链接 https://laravel.com/docs/8.x/blade#stacks

【讨论】：

谢谢兄弟，我正在使用@push 指令。但是我想要刀片中的 SCSS lang。在单独的文件app.scss 中编译 SCSS 代码将花费大量时间来编译。无论如何，谢谢。

如果在 Temple css 中就使用 css

@KamleshPaul 这不会变成scoped，它只是将任何特定的css添加到全局堆栈中。

【参考方案2】：

我也遇到过类似的情况。如果没有大量工作（在刀片编译器方面），我不知道这是可能的。在刀片中拥有<style lang="scss" scoped> 需要scss 编译和范围界定。一个更简单的解决方案是按照 Kamlesh 的建议，在模板中提供样式。

虽然没有 scss 编译，但确实可以在刀片模板中编写多个类似vue single file component 的组件。 Vue 不提供此功能（与 vue 文件一样优雅），但使用名为 vue blocks 的层，您可以实现以下目标：

<template component="some-component">
    <div>
        <p>My paragraph</p>
        <div class="some block"></div>
    </div>
    <style scoped>
        :root  
            background: black;
            padding: 20px;
            margin: 20px;
        
        p 
            color: red;
            font-weight: bold;
        
        .block 
            border: 3px solid green;
            height: 20px;
        
    </style>
    <script>
    // vue component here
    export default  
       data()  return   ,
       mounted()  

       
    
    </script>
</template>

更多信息可以在这里找到：

https://fluxfx.nl/vue-blocks/examples/index.html#/features/scoped-styles

【讨论】：

拥有 Vue 组件是个好主意。我有他们。但出于某些原因，我想在 Blade 中使用它。不幸的是，编译 SCSS 文件会花费很多时间，而且每次我想查看更改时，我都会等待。在 Vue 组件中，反之亦然，编译不需要时间。我猜这是因为它的 Virtual DOM 处理程序。

好吧，我明白了，你不是在寻找在刀片中编写 vue 组件，你只是希望能够在刀片中编写作用域 scss，而不是拥有一个需要一个大的 app.scss 文件同时生成。我明白你为什么想要那个。