Laravel noob here, I'm developing in Homestead.
Right now, if I want to edit something in my CSS, I edit app.scss(located in resources/assets/sass) then recompile my css with Mix. (npm run dev)
I don't know if this is the correct way to edit your css, but the last time I edited something, it worked. But now it doesn't and I'm confused.
I would also appreciated it if someone would tell me what's the use of _custom.scss and _variables.scss in sass folder.
This is the correct way. However, you need to run npm run dev each time you make changes to the app.scss file. Better way is to use npm run watch which can keep watching changes to your script files.
_variables.scss and _custom.scss files are called partial files. It is a convenient way to organize code. In care you want to use partial files. You will have to import them in app.scss file #import 'partials/variables'. Though you have to be careful about the order you import the partial files, in case you are using variables and mixins as they need to be imported first before other partials.
For more information checkout the sass documentation or this treehouse video
Related
I'm trying to configure adminLTE in Laravel project. I have found a way of modifying it, but when I want to modify it, it has to be done in vendor/jeroennoten/laravel.../views/master.blade.php or page.blade.php for basics and if I want to modify menus and navs it has to be done in vendor/jeroennoten/laravel-adminlte/config/adminlte.php
By default in .gitignore is also vendor folder. Now, I'm wondering, how to manage all this with GIT cause I'm changing things in vendor file? What is the recommendation and/or best practice? Try not to change anything in vendor, and make views in resource folder (what looks kind of huge work for adminLTE), or to use i.e. !vendor/jeroennoten in .gitignore, track all changes and update it on gitHub.
Is there any additional things I should do if someone wants to pull the project so he/she can see changes in vendor.
I'm new to this, so if this seems kind of dummy question or there is completely different approach please have understanding.
So Webpack is for bundling stuff. It has a lot of use case it seems, but I'm new to it so I might be missing something or using it incorrectly.
Currently it's probably mostly used for bundling JS and CSS and perhaps handling images with the file-loader or url-loader.
It also seems to bundle and do its plugin stuff in a cascading way. Meaning that a import in import will get evaluated and so I see that a image which is stored in a CSS file thusly:
background-image: url(../images/banner.jpg);
will go through the loader that handles .jpg files and gets moved through to the dist folder as well as the CSS will have the relevant path updated according to this. I'm not sure what part of webpack manages that, is it the css-loader perhaps that ensures this?
The problem arises since I'm currently developing a WP theme which uses PHP templates. This I never pass through the Webpack pipeline. PHP loader seems to be about converting to HTML and that is no good.
So if I have a <img src="images/brand.jpg"> tag in the template I would have to manually import that image, and ensure that I have the right path to a currently non-existing bundle. I can also forget about inlining images using url-loader or svg-loader for example.
Is this just a ( currently ) non-existing use case for Webpack since most users are doing React or Vue projects with it.
Or am I missing something obvious?
If you still seek for an answer for that question - you can achieve that with Webpack manifest plugin (and [optionally] with Webpack copy plugin) and some php handler to parse the manifest.
I have a working version which you can see here
https://github.com/LowGravityPL/RaccoonWP/tree/master/public/core/themes/raccoon-twig
Webpack code is in build-utils directory
I'm currently working on setting up a custom admin page for a specific task I need to do and it requires some custom styling in the theme. I went to the themes/SuiteP/css folder and found admin.scss. After making a change, I had assumed that Suite would dynamically compile the asset since I am developer mode; however, that did not happen.
I decided to search the code for any place I could find that would deal with compiling those files to *.css, but found no such place.
My question involves inquiring as to where that compilation takes place and/or how it takes place. Right now it appears as if I have to manually compile those assets, which seems pointless because it is just an extra step I have to manually take, rendering using SCSS less useful in comparison with CSS.
Right now, my solution will probably have to be adding a CSS file that has nothing to do with whatever pipeline exists, but if I can leverage existing functionality, that would great.
Due to legacy issues with the SugarCRM framework, SuiteCRM loads style.css for current theme. The sass work for SuiteCRM is in a transitioning period. It is currently a manual process, but we hope to make it automated in the future.
We are using Sass as a way to allow developers to customise the SuiteP theme. I have a github project which provides a UI to generate the variables.scss for you. I am hoping that it will be accepted in a future release.
So in regards to your workflow you only need to care about the style.css.
If you want to contribute back to the SuiteCRM project, then you will need to use the sass files in themes/SuiteP/css/.
However, if this is just for your instance of SuiteCRM, then you will want to create a style.css in the custom/themes/SuiteP/css/style.css. How you change that is up to you.
I would recommend that you use Sass to generate the style.css.
You can achieve this by copying the style.scss file custom/themes/SuiteP/css and then add the following to the file
#import ../../../../themes/SuiteP/css/style.scss
Note: I may have the path slightly wrong
or use the command line tools to include the themes/SuiteP/css/ directory
See for details:
SASS: Import a file from a different directory?
SuiteCRM should pick up the rest of the work. There is a change in SuiteCRM 7.9 that deprecates the $sugarcrm_version in favour of $suitecrm_version. This will effect theme themedef.php.
See for details
https://github.com/salesagility/SuiteCRM/pull/3233/files
I hope this answers your question.
First case: i've got some script, which i've writed by myself(lets call it requests.js).
Second case: there is a big plugin TinyMCE, which i can install from bower or npm.
In first case as far as i understand, i should save my scripts in resources/assets/js. But where should i call them after this? There are 2 files in assets/js, which were installed with Laravel 5.3: app.js and bootstrap.js. Should i call my scripts in these files and then gulp them into a single one?
In second case i should use some npm or bower package manager. But, what should i do next? Where should i call this installed packages?In assets/js/ - app.js or bootstrap.js? But how, or maybe i shouldn't do it?
It's hard to put bower components in resource/assets/js only, because these components often consist of many files, js/css/others. I just use bower install inside root of the installation, bower_components dir appears and I put it into .gitignore. Anyone who pulls changes, can do bower install.
Going further, I make file, where I create json object with two values, js and css, where I put path to files I need. Then I require it inside gulp.js and I can do whatever I want with these files. Usually concat, minify, copy result to public.
Theres nothing wrong with putting frontend into same server. Maybe you work alone or in the small team, and you don't have time to manage too many things. Common practice I see all around is that people make dir angular inside root and just grab all js/html files inside this dir, and copy them to public inside gulp.
It's opinion based, but I think it is not a good practice to mix front-end and back-end.
Your Proposal
Your public (front-end) files, like bootstrap, you should store them in public/ of the Laravel installation. You can use public/assets/js, etc. The folder resources is not available in your html files (if you mean the folder of your Laravel installation).
Better Approach
A better approach is to separate totally your front-end from back-end. In that case, you need a front-end framework, like AngularJS or Ember.
Why?
You can replace one of them without troubles in the other
You can use your back-end as third party api (https://api.yourdomein.com/v1/...)
No conflicts with blade views and other template formats
Of course, separation of responsibilities
You should install your bower components in your resources/assets/js folder. Then add any of these components to your build process in your gulpfile. This way, you have total control over what gets concatenated and minified and ultimately included in your templates.
My original problem was linking multiple stylesheet frameworks. My primary option was Materialize and for reasons, i'd like to integrate Bootstrap on some buttons and other components. After hours of desperate research, i found myself staring at css pre-processors, e.g. LESS and SASS. I found out that you can do dynamic css using these badasses.
Investing a couple more hours deciding which to use, I ended up failing to install both.
So far I managed to download bootstrap sass and integrated it inside my project and compiled it using grunt (follow this instruction). I don't know how to use it and where to start.
I found some cool references here but it was not enough to get me going.
.bootstrap {
#import "/bootstrap.less"
}
I have so my follow up questions to the post:
should I link the less file on my index.php?
can I use any editor and compile the less with any less compiler?
should i link the compiled less or the created css?
do I even need to use LESS for this?
Note: I'm a total newbie with LESS and SASS. Any information is a ++.
I personally prefer Sass and I use it a lot even for small CSS stylesheets!
Here you are my answer:
Absolutely not! A less file is not intended for browser parsing. It is intended only for development purpose, that is to produce one or more .css file.
Feel free to use any editor you prefer and compile with any compiler you prefer. For example, I use Scout-App for Sass.
You must link only .css produced files.
It depends on your project and/or your needs. LESS and Sass are very similar.
Other tips for you:
Install on your CodeIgniter app an asset helper, and in asset folder place your css and less files. See the directory structure below:
application
system
user_guide
assets
--css
--less
--js
--img
ecc...
Put your less file separated from your css file. Link css file with the asset helper and you will have autoupdatable style!
If you use Git, remember to ignore css folder and track less or sass folder.
I hope you can find these tips helpful!
UPDATE: It's a shame that no one answer to this question in time!