简体   繁体   English

Laravel 5 Elixir:如何编译和移动.scss文件?

[英]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在运行时在命令行中提供了某种反馈,那将非常有帮助。

My gulp.js 我的gulp.js

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM