laravel - 如何在 Laravel 中使用 scss 文件

Question

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

如果我在浏览器中打开主题的 index.html 文件，它就可以正常工作。

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

scss 文件夹 存在于主题文件夹中，但我真的不知道如何将其包含到我的项目中

Answer 1

您可以将 SASS 视为高级 css，它为您提供更多功能，例如使变量和更简单的 css 语法等...但由于浏览器不理解 SASS，您必须将 SASS 编译为 CSS，有多种方法可以做到那个。

首先，如果您的主题文件夹已经编译了 SASS(CSS 文件夹)，您可以使用它，如果没有，并且想要与 Laravel 集成，请按照以下步骤操作

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

2. 现在你必须将 SASS 编译成 css，你可以手动使用 gulp 或使用Laravel mix 已由 Laravel 为您实现

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

4. 运行 npm install 后，现在您可以运行其中一个来编译任何“resources/assets/sass”中的 sass 文件

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

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

希望您发现这对您有帮助，您可以在 Laravel 文档前端部分特别是 Laravel Mix here 中阅读有关此内容的更多信息。