LARAVEL：如何将 app.sass 编译成 app.css

Question

更新在 Windows 10 上的 Laravel 5.4.30 上运行

更新： 将文件保留为 .scss 效果很好，但我不想在我的项目中使用它。我想使用缩进的 sass 或 .sass

好的，所以在我决定在这里提出这个问题之前，我已经投入了数小时的研究。 简单来说，我该如何编译：

resources/assets/sass/app.sass 在 Laravel 中变成 public/css/app.css？

我尝试过使用 Laravel Elixir.. 完全失败..

我试过了

mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.sass', false, { indentedSyntax: true }, 'public/css');

在webpack.mix.js

注意{ indentedSyntax: true }，这也不起作用。

我已经安装了node-sass 和gulp 节点模块.. 仍然没有成功。

这是我的_custom.sass 文件，位于与app.sass 相同的目录中

// Fonts
// @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600")

// Variables
@import "variables"

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"

.flex-center
  display: none

.flex-center 是 welcome.blade.php 中包含的 Laravel 中的类，我用它作为测试并将显示设置为无。

在我的app.sass 文件中，我只有：

@import "custom"

请注意，我将 _variables.scss 更改为 _variables.sass，所以它不是正确的 .sass 语法（但当然无论如何都没有编译，所以它并不重要）

我已经尝试过 sass-loader、gulp-sass、compass-sass，没有任何效果。

必须有一种更简单的方法（甚至是一种方法）在 Laravel 中使用 .sass 并将其编译为 app.css！

我感觉这一切都与我的 webpack.mix.js 文件有关，但很少有关于参数设置的文档可以将其编译为 app.css。

任何帮助将不胜感激，我看到有很多人遇到这个问题，谢谢！

Answer 1

已解决

简单修复.. 克隆或下载 lavarel 的 repo @https://github.com/laravel/laravel

虽然我更新了package.json、webpack.mix.js等，但当前/最新版本中肯定还有一些额外的文件或代码。

下载 repo 后，运行 npm install 以确保您拥有所有必要的 node_modules 并且不会遇到任何错误。

在npm install之后，你可以成功运行npm run dev并编译任何资产包括缩进的sass！

Answer 2

虽然你解释得很好，但我仍然没有找到你卡住的地方，无论如何让我试一试。

来自 laravel 文档：

mix.sass('resources/assets/sass/app.sass', 'public/css')
   .sass('resources/assets/sass/admin.sass', 'public/css/admin');

之后：

// Run all Mix tasks...

npm run dev

// Run all Mix tasks and minify output...

npm run production

之后，您可以通过以下方式将public/css 中生成的.css 文件包含在您的.blade 文件中：

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">

如果你使用 Laravel 5.4 Elixer 将无法工作。

如果不是你想要的，请告诉我。