Wai Yan Hein Wai Yan Hein - 12 days ago 6
Sass (Sass) Question

Laravel-sass not working

I am developing a Web Application. In am using Laravel 5.3. I also want to use sass. This is my first time of using sass. So I am absolute beginner to sass. I learned from this tutorial- http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass. Now I am trying to integrate sass with Laravel. I just started building project. So I decided to use this one - https://github.com/panique/laravel-sass. Please see what I have done below.

I included this in composer.json

"require-dev": {
"panique/laravel-sass": "1.0"
}


I added this line in public/index.php

SassCompiler::run("scss/", "css/");


So my index.php in public folder look like this

enter image description here

Then I run "update composer" commaned in terminal. Installtion worked well in terminal.

So now I need to try on sass and make sure it is working or not.

So I created two file in public folder.

public/css/style.css


and

public/scss/style.scss


Then I created a view, hello.blade.php. This is the html.

<!DOCTYPE html>
<html>
<head>
<title>SASS</title>
<link rel="stylesheet" type="text/css" href="{{ url('css/style.css') }}">
</head>
<body>
<h1 class="heading">Let's sass. Just change color.</h1>
</body>
</html>


Then I added this lines in public/scss/style.scss

$red: #FF4848


.heading
color:$red


Then I configure laravel route like this.

Route::get('hello', function () {
return View('hello');
});


When I access the url from browser, it is giving me this error.


Fatal error: Uncaught Exception: parse error: failed at
$color : red
line: 1 in
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php:4108
Stack trace: #0
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php(2761):
scss_parser->throwParseError() #1
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php(121):
scss_parser->parse('$color : red\r\n\r...') #2
C:\xampp\htdocs\whatsuppathein\vendor\panique\laravel-sass\sass-compiler.php(53):
scssc->compile('$color : red\r\n\r...') #3
C:\xampp\htdocs\whatsuppathein\public\index.php(50):
SassCompiler::run('scss/', 'css/') #4 {main} thrown in
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php on
line 4108


So please, what is wrong with my code? How can I correct it? I am new to sass. Please help me.

When I replace this line

SassCompiler::run("scss/", "css/");


with this

SassCompiler::run("public/scss/", "public/css/");


in public/index.php, it is not throwing error. But not changing any css. Not changing the font color.

Answer

Laravel uses gulp to transpile dependencies and it comes built it when you do npm install from your project direcftory.

Open up your resources/scss/app.scss file and you can perform @import statments to your own files.

The gulp.js file in your project's root directory contains the sass transpiling.