Use Sass instead of less Laravel 5
Submitted by mercuryseries - 9 years ago
You’re using Laravel 5 and you want to switch from less (which is used by default) to sass? Here is some steps that you can follow in order to make that transition.
1) First of all, you have to make sure that NodeJS is installed on your computer.
In order to check that, you can type in your terminal:
node -v
That will print the currently installed version of NodeJS.
2) Run the command npm install in order to install gulp and laravel-elixir locally.
3) After that, install gulp and bower globally if it isn't already the case.
npm install -g gulp
npm install -g bower
4) In you terminal, once at your project root, run this command:
bower init
Accept all the default values, if you don't know what you're doing :)
A new bower.json file will be created for you!
5) Create a .bowerrc at the root of your project and put the following code inside:
{
"directory": "vendor/bower_components"
}
With that code, we specify that all our libraries will be stored in "vendor/bower_components".
Change that if you want to choose another directory.
6) Install now the libraries that you want. For example, I will install bootstrap-sass-official and font-awesome but you can use the bower search command in order to find any libraries available.
No need to install JQuery because in this case it's a dependency of bootstrap-sass-official.
So here we go:
bower install bootstrap-sass-official --save
bower install font-awesome --save
7) Rename app.less to app.scss and delete all unnecessary less files in the resources/views/less directory.
8) Update your gulpfile.js with the following code.
var elixir = require('laravel-elixir');
var paths = {
'bower_base_path': './vendor/bower_components/',
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
};
elixir(function (mix) {
mix.sass('app.scss')
.copy(paths.bootstrap + 'stylesheets/', 'resources/assets/sass')
.copy(paths.bootstrap + 'fonts/bootstrap', 'public/fonts')
.copy(paths.bootstrap + 'javascripts/bootstrap.js', 'public/js/vendor/bootstrap.js')
.copy(paths.bower_base_path + 'jquery/dist/jquery.min.js', 'public/js/vendor/jquery.js')
.copy(paths.bower_base_path + 'font-awesome/css/font-awesome.min.css', 'public/css/vendor/font-awesome.css');
});
Pretty self explanatory. Isn't it?
9) If you want to use the bootstrap,
Add @import 'bootstrap'; in your app.scss file.
10) Run the "gulp" or "gulp watch" command and you're now good to go!!
Good Luck my best friend :)
Stats
-
0 likes
- 13588 views