I'm using Linux Mint and I'm trying to run compile sass file.
I have installed npm and node. But when I run gulp
, it doesn't compile and it doesn't make css file in public
directory.
When I run it, itdoesn't show any error or anything.
How should I compile sass file in Laravel 5.2? Thanks!
Edited: This is the screenshot:
Gulpfile.js is:
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 Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
My app.scss file is:
// @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
li {
color: red;
}
Updated: When I ran again `npm install` there is this error:
Then I ran:
whereis nodejs
and output was:
nodejs: /usr/bin/nodejs /usr/lib/nodejs /usr/bin/X11/nodejs /usr/include/nodejs /usr/share/man/man1/nodejs.1.gz
and to link nodejs to node symlink I ran:
ln -s /usr/bin/nodejs /usr/bin/node
But when I run gulp
still the same.
Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports several common CSS and JavaScript pre-processors, and even testing tools. Using method chaining, Elixir allows you to fluently define your asset pipeline.
npm install. Once the dependencies have been installed using npm install , you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory: npm run dev.
Gulp is a javascript task runner, it keeps things simple and makes the complex task manageable. Here I am gonna show you how easy it is to use Gulp with Laravel's Elixir to combine and minify application CSS and JavaScript files.
Did you try specifying the css file like in the code below?
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 Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
.version('css/app.css');
});
I hope this solves your problem!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With