如何在Laravel中使用Scss文件

Question

我已经下载了免费的HTML主题。

如果我index.html在浏览器中打开主题文件，则效果很好。

但是，现在我需要将此主题集成到我的Laravel应用程序中。如果我检查浏览器中加载的index.html文件中的元素，则可以看到其中一些.scss files正在被调用。

该scss folder存在于主题文件夹，但我真的不知道如何将其纳入到我的项目这

Answer 1

您可以将SASS视为高级CSS，它为您提供了更多功能，例如使变量更容易使用的CSS语法等...，但是由于浏览器无法理解SASS，因此您必须将SASS编译为CSS，因此有多种方法可以实现。

首先，如果您的主题文件夹已经符合SAS​​S（CSS文件夹）的要求，则可以使用它，并且如果要与Laravel集成，请按照以下步骤操作

1. 将所有内容复制到您的SASS文件夹中，并将其放在“ / resources / assets / sass”中，以便Laravel可以找到它们进行编译

2. 现在您必须将SASS编译为CSS，您可以手动使用gulp或使用Laravel已经为您实现的Laravel混合

3. Laravel附带packages.json文件，您会在应用程序的根目录中找到该文件，因此在编译SASS之前，必须npm install在根目录中运行（确保已安装了npm和node）

4. npm install现在运行后，您可以运行其中之一来编译“资源/资产/ sass”中的所有sass文件。

   npm run dev //this will compile one time only
   npm run watch //this will keep watching for any changes and compile 
   automatically
   

现在，您的sass文件应该已经编译为CSS，您可以在“ public / css”文件夹中找到已编译的CSS文件。

希望你发现这是很有帮助，你可以在Laravel文档前端节专门Laravel混合阅读更多关于此这里

Answer 2

Laravel 的最新版本使用了一个名为 Vite 的工具来替代 Laravel Mix。

为了将 Sass 与 Vite 一起使用，请确保安装了 Vite 和 Sass，运行npm install和npm add -D sass

确保项目资源目录中有 sass 或 scss 文件夹，并且内部有一个 scss 文件，例如 app.scss

确保您已配置 vite.config.js （可以在新的 Laravel 项目根目录中找到）以包含 sass 的入口点，如下所示，使用您创建的文件夹的正确路径和名称：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/scss/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

在您的 Blade 文件中添加以下内容，再次确保使用您创建的文件夹的正确路径：

@vite(['resources/scss/app.scss', 'resources/js/app.js'])

然后你可以通过运行npm run build使用 Vite 构建你的 sass