LARAVEL：如何将 app.sass 编译成 app.css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45261319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
LARAVEL: How to compile app.sass into app.css
提问by Zach Broniszewski
UPDATERunning on Laravel 5.4.30 on Windows 10
更新在 Windows 10 上的 Laravel 5.4.30 上运行
UPDATE:Leaving the files as .scss works perfectly fine, but I do NOT want to use this in my project. I want to use indented sass, or .sass
更新：将文件保留为 .scss 工作得很好，但我不想在我的项目中使用它。我想使用缩进的 sass 或 .sass
Okay, so I have committed to hours upon hours of research before I decided to ask this question on here. Simply put, how do I compile:
好的，所以在我决定在这里提出这个问题之前，我已经投入了数小时的研究。简单地说，我如何编译：
resources/assets/sass/app.sassinto public/css/app.cssin Laravel?
resources/assets/sass/app.sass成public/css/app.css在Laravel？
I've tried using Laravel Elixir.. total fail..
我试过使用 Laravel Elixir .. 完全失败..
I've tried
我试过了
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.sass', false, { indentedSyntax: true }, 'public/css');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.sass', false, { indentedSyntax: true }, 'public/css');
in webpack.mix.js
在 webpack.mix.js
Notice the { indentedSyntax: true }, this also didn't work.
请注意{ indentedSyntax: true }，这也不起作用。
I've installed the node-sassand gulpnode modules.. still no success.
我已经安装了node-sass和gulp节点模块......仍然没有成功。
Here is my _custom.sassfile found in the same directory as app.sass
这是我_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-centeris the class in Laravel included in welcome.blade.php, I used this as a test and set display to none.
.flex-center是包含在 Laravel 中的类welcome.blade.php，我将其用作测试并将显示设置为无。
In my app.sassfile, I just have:
在我的app.sass文件中，我只有：
@import "custom"
Do note that I changed _variables.scssto _variables.sass, so it isn't proper .sass syntax (but of course nothing is compiling anyway, so it's not like it matters)
请注意，我更改_variables.scss为_variables.sass，因此它不是正确的 .sass 语法（但当然无论如何都没有编译，所以它并不重要）
I've tried the sass-loader, gulp-sass, compass-sass, nothing has worked.
我已经尝试过 sass-loader、gulp-sass、compass-sass，但没有任何效果。
There has GOT to be an easier way (or even a way at all) to use .sassin Laravel and have it compile to app.css!
必须有一种更简单的方法（甚至是一种方法）.sass在 Laravel 中使用并将其编译为app.css!
I have a feeling it all has to do with my webpack.mix.jsfile, but there is very little documentation of the parameter setup to have it compile to app.css.
我有一种感觉，这一切都与我的webpack.mix.js文件有关，但是很少有关于参数设置的文档可以将其编译为app.css.
Any help would be greatly appreciated, I've seen there are a number of people with this problem, thanks!
任何帮助将不胜感激，我看到有很多人有这个问题，谢谢！
回答by Himanshu Bhandari
Though you have explained very well but I am still not getting where you stuck, anyway let me give it a try.
虽然你解释得很好，但我仍然没有明白你在哪里，无论如何让我试一试。
from laravel docs :
来自 Laravel 文档：
mix.sass('resources/assets/sass/app.sass', 'public/css')
.sass('resources/assets/sass/admin.sass', 'public/css/admin');
after that :
在那之后 ：
// Run all Mix tasks...
npm run dev
// Run all Mix tasks and minify output...
npm run production
After that you can include the .cssfile generated in public/cssin your .bladefiles through :
之后，您可以通过以下方式将.css生成的文件包含public/css在您的.blade文件中：
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
If you are using Laravel 5.4 Elixer won't work.
如果您使用的是 Laravel 5.4 Elixer 将不起作用。
let me know if it is not what you want.
如果这不是您想要的，请告诉我。
回答by Zach Broniszewski
SOLVED
解决了
Simple fix.. clone or download lavarel's repo @ https://github.com/laravel/laravel
简单修复.. 克隆或下载 lavarel 的 repo @ https://github.com/laravel/laravel
Though I've updated package.json, webpack.mix.js, etc., there must still be some extra files or code in the current/most-updated version.
尽管我已经更新了package.json、webpack.mix.js等，但在当前/最新版本中仍然必须有一些额外的文件或代码。
After you download the repo, run npm installto be sure you have all necessary node_modules and don't run into any errors.
下载 repo 后，运行npm install以确保您拥有所有必需的 node_modules 并且不会遇到任何错误。
After npm install, you can successfully run npm run devand compile any assets including indented sass!
之后npm install，您可以成功运行npm run dev和编译任何资产，包括缩进的 sass！
