[英]Laravel 5 elixir: How do I Compile and move .scss files?
I have tried to follow the instructions at laravel-elixir , but I'm apperantly still to green to get it, so I hope you can explain it to me in a more beginner-friendly way. 我试图按照laravel-elixir上的说明进行操作 ,但是我仍然很想获得它,所以我希望您能以一种对初学者更友好的方式向我解释。
I want to use elixir to compile my scss from resources/assets/scss/styles.scss
and then output the file to public/styles.css
. 我想使用elixir从
resources/assets/scss/styles.scss
编译我的resources/assets/scss/styles.scss
,然后将文件输出到public/styles.css
。
How do I set the custom path to my .scss file? 如何将自定义路径设置为.scss文件? Where is the file outputted, so I can .copy() it to public?
文件输出到哪里,因此我可以将.copy()公开?
My styles.scss looks like this (yes, there are 2 assets folders in total. Laravels and my own): 我的styles.scss看起来像这样(是的,总共有2个素材资源文件夹。Laravels和我自己的):
/*! Testing Elixir */
//assets
@import 'assets/cssReset';
@import 'assets/variables';
@import 'assets/mixins';
//layouts
@import 'layouts/base';
@import 'layouts/dashboard';
@import 'layouts/logo';
@import 'layouts/forms';
@import 'layouts/siteNavigation';
@import 'layouts/lesson';
@import 'layouts/course';
@import 'layouts/courseList';
@import 'layouts/courseNavigation';
@import 'layouts/landingPage1';
@import 'layouts/landingPage2';
@import 'layouts/pagination';
@import 'layouts/footer';
//userMenu
@import 'layouts/menu';
It would be really helpfull if gulp gave some kind of feedback in the commandline when run. 如果gulp在运行时在命令行中提供了某种反馈,那将非常有帮助。
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
Okay, so I finally figured where I went wrong. 好的,所以我终于弄清楚了我出了错。
I thought app in mix.sass('app.sass');
我认为应用程序在
mix.sass('app.sass');
was a path variable, and . 是路径变量,并且。 was the equivalent to / like with blade directory seperators, and then sass was the folder name.
与刀片目录分隔符的/等效,然后sass为文件夹名称。 It turned out app.sass was a filename.
原来app.sass是文件名。 Do'h...
...
When I renamed my path to: resources/assets/sass and then specified: 当我将路径重命名为:resources / assets / sass然后指定时:
elixir(function(mix) {
mix.sass('styles.scss');
});
Gulp outputted the file here: public/css/styles.css
Gulp在这里输出文件:
public/css/styles.css
Hope this helps others that makes the same false assumptions like me. 希望这对其他做出与我相同的错误假设的人有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.