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是Laravel中包含在welcome.blade.php中的类，我用它作为测试并将显示设置为无。

在我的 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

虽然你解释得很好，但我还是没明白你的意思，无论如何让我尝试一下。

来自 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 将无法工作。

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