Laravel and using custom CSS file

Laravel 5 supports CSS and JavaScript preprocessors through Elixir and Gulp. Elixir is a node.js tool that helps gulp in the use of less, sass and coffee methods. Gulp assist programmers by automating repeated task like copying files, testing, minify codes.

If all that sounds confusing, dig deeper and you will find that Laravel framework assist developers to build and test application faster through tools like Elixir and Gulp.

There will be cases where an existing and proven CSS file should be used within a Laravel 5 project. In this example, there is a CSS file name beautiful.css that provides a box when used in the DIV CLASS code of the php application as shown below;

<DIV class="beautiful-tip">
 <P>Hello World</P>
</DIV>

We will use an existing working Laravel 5 application that is installed at the folder named <project>. In the gulpfile.js, the mix.sass contains 'app.scss' where instructions to use the CSS will be recorded.

Step 1: Copy the CSS file to Project's node_modules folder

Create the folder "example" in <project>/node_modules
Copy beautiful.css into the folder <project>/node_modules/example and make sure the folder and its contents are readable by the web server service.

Step 2: Include the CSS file when gulp compiles SASS files.

Edit <project>/resources/assets/sass/app.scss

At the last row, add the command (name of CSS file without its extension) and save.
@import "node_modules/example/beautiful";

Step 3: Run gulp.

At a command prompt in the project folder, type

# gulp

Done