CSS Paths

Are the paths to the images relative to the source .css files or are they relative to the destination app.css file?

I ask because I make all of my paths relative to the resource root and within my PHPStorm project set the public folder to be the resource root so that my file paths are always accurate for the destination .css file.

Hi @DaveBagler ,

Currently they are relevant to there own .css source. Sine writing this post I have also come into confusing with the css files as well.

Currently I store all the "assets" I was in resources and then gulp copies them over to public/assets/

Currently with the gulp file I have linked to below (Too big to share on here) I get the following structure`:

Note: My JS is doing what it should!

Current Structure:

   public
    assets
        css
            admin
                admin (Files in here)
               app.scss 
               app.css
        fonts
        js
        themeImg

What I would like to do is eliminate the second "admin" folder and have the files within that folder in css/admin along with app.scss and libs

https://gist.github.com/jzmwebdevelopment/87dc3baa7b1e7f9cc25a

I don't have time to go through the gulp file in detail tonight but I'll take another look tomorrow. In the meantime you might want to use the mix.scriptsIn function so you don't have to list each individual file in your gulp file.

That would be great @DaveBagler if you could as I am new to all this and find it a bit over the top

Have you been able to shed any light @DaveBagler

Couple of questions:

1. Are you using all those Javascript files?
2. How are you pulling in those CSS/JS libraries? NPM?

Here's my initial suggestions based on your shared gulp file the elixir docs (https://laravel.com/docs/master/elixir):

1. Move your assets to the standard locations (resources folder for your custom assets, node_modules folder for front-end dependencies that you include in your package.json file and install with npm.)

2. Include your third-party SCSS libraries (bootstrap, mega menu, font awesome, etc...) in your main SCSS file using @import calls to import them from their location in the node modules directory.

3. For the JavaScript only include the minified version of a file or the non-minified version rather than pulling both copies into your app.js

@DaveBagler I am currently working through what I need and what I don't. I am currently working on the "admin" section the front end is going to be completely diff style:

Are you using all those Javascript files? - As above

How are you pulling in those CSS/JS libraries? NPM? I have just copied and pasted them - they are apart - http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469

I've never tried to make a third party template work with elixir before. You might need to play around more with where you are storing/grabbing files.

I don't know your app so I can't tell you if this is worth while but it might be worth identifying each library used by the theme, finding the npm package for that library and including them though npm so they are part of your work flow and then like I said using the @import statements in your main SCSS file to bring in 3rd party CSS and then just including the minified versions of whichever javascript files you're using.

Thanks @DaveBagler it was the storing grabbing files that was getting to be and why was I getting admin/admin is there a way to move the files? thats were I am confused. The theme is not on NPM :(

Yeah I wouldn't expect the theme to be on npm however the libraries used by the theme (bootstrap, amcharts, bootstrap-datetimepicker, ckeditor, etc...) are on npm, you would need to include each of them in your package.json file.

I'll check back in tomorrow.