I have an issue with compiling scss and CSS files into a single CSS file using laravel webpack mix, already done much research and try all the possible options but the issue is still not fixed.
The app.scss file includes bootstrap and a custom file but after compilation compiled CSS file contains custom CSS first then bootstrap but I want bootstrap CSS first after that my custom CSS on compiled file, my code looks like this
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
#import '/resources/css/style.css';
But compiled CSS file contains style.css code at the top and then bootstrap at the bottom, how can I reverse this?
I'm a web newbie programmer,
I'm trying to learn from home to make my own web.
I have notions of php, html, js and css.
But I've found something that is not how to solve.
I'm trying to use Composer to manage Bootstrap. I installed Composer and I have run this line of code
composer require twbs/bootstrap
that has dropped a folder with files.
I do not understand is how I make html links to find the js and css files, you should do indicating the full path?
vendor / twbs / bootstrap / dist / js / bootstrap.js
Excuse me if the question is stupid but I do not know how I should continue.
Amd excuse my English, I'm learning too but by now I use google translate
You could use a post update command in the composer.json file:
"scripts": {
"post-update-cmd": [
"rm -rf public/bootstrap",
"cp -R vendor/twbs/bootstrap/dist public/bootstrap"
]
}
And then just include the javascript- and css-files like this:
<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"></script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">
Yes, Composer downloads the dependencies by default into the vendor folder. So Bootstrap will also land in the vendor folder, which is not the correct place to reference it or include it.
composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js
Your next step would be to write a little helper script to copy the Boostrap files you need, into your public/assets folder. You could copy the complete dist folder including sub-folders (vendor\twbs\bootstrap\dist) into public or public\assets.
Please overwrite existing files, e.g. if a file exists remove it, then copy it. This allows to easily update the files, when you need to update the Bootstrap vendor package again.
Of course, you could also just copy the files manually or create a symlink. It depends.
That gives you the following directory structure:
public
\- assets
|- css
|- js
\- fonts
\- index.html
When the Boostrap assets are copied you can start to include them, in your index.html or template (assets\js\bootstrap.min.js, etc.).
Referencing: https://stackoverflow.com/a/34423601/1163786 which shows also other solutions to this problem, e.g. fxp/composer-asset-plugin, bower, grunt.
Unless you need customization inside bootstrap (e.g. building scss), the most simple solution is relying on a CDN (as a bonus, you get super-fast caching of assets)
So, simply call your assets like so:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Composer is a super-excellent tool for backend dependencies, but not the best one for frontend.
If you want to have the files in your server, and you don't want to use npm, grunt or another frontend library manager, you can simply download the files listed in Massimiliano's answer and put them inside your js/css folders:
First download these files (updated to the most recent Bootstrap 3 version):
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
And put them in these folders (starting from the root of your project):
public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js
Now, you want to be able to call them in the blade templates for your views. It's simple: just add <link> and <script> tags as normal for any css/js file, adding the following to your blade template:
<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>
P.s.: if you see the console, it shows something as the following error message:
Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map
This will not affect the style of your page, and you can simply ignore this message, or remove a line from the bootstrap file as the answers to this question suggest. This answer explain a bit more.
I am new to a Symfony 2 project that contains an SCSS file in the Resources folder: myproject.scss
In the head of the HTML files, the css version of this file gets included:
#MyBundle/Resources/public/css/myproject.css
PHP Storm indicates "Missing asset". The HTML cannot be rendered, Symfony2 says that the asset is missing.
I have never worked with SCSS. How do I achieve that on file change of my scss file the css file gets created/updated and Symfony2 no longer indicates a missing asset for my css path in my HTML file?
What I have done so far in order to solve this problem:
I installed SASS and Compass via the Ruby gem manager.
In PHPStorm, I configured a file watcher "SCSS", referencing to C:\Ruby\bin\scss.bat
After installing SCSS compiler and setting the right path in File Watcher settings your css will be generated every time you change your .scss file. This .css file is located by default near original .scss and so to copy it into the web directory you need manually copy it every time or configure your file watcher to do it for you instead.
Also you can configure scssphp assetic filter to do it instead of PhpStorm. It will generate new css file every time you run php app/console assetic:dump command or every time asset is loaded via assetic controller.
To work with Assetic you need next code:
{% stylesheets filter="scssphp" output="css/myproject.css"
#MyBundle/Resources/myproject.scss
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
I have a problem with my Wordpress template built with use of Bootstrap - scripts do not work, e.g. dropdown menu... I am sure that I'm doing everything right according to the instructions. But I do not know why my Bootstrap want to load "assets" folder though in that version (3.1.0) there is no such folder.
Location of my theme folder with Bootstrap files in it looks like that:
http://localhost:8888/my-site/wp-content/themes/my-theme/
My console says:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8888/assets/js/bootstrap-transition.js
http://localhost:8888/assets/js/bootstrap-alert.js
http://localhost:8888/assets/js/jquery.js
http://localhost:8888/assets/js/bootstrap-modal.js
http://localhost:8888/assets/js/bootstrap-dropdown.js
http://localhost:8888/assets/js/bootstrap-scrollspy.js
http://localhost:8888/assets/js/bootstrap-tooltip.js
http://localhost:8888/assets/js/bootstrap-tab.js
http://localhost:8888/assets/js/bootstrap-popover.js
http://localhost:8888/assets/js/bootstrap-button.js
http://localhost:8888/assets/js/bootstrap-collapse.js
http://localhost:8888/assets/js/bootstrap-typeahead.js
http://localhost:8888/assets/js/bootstrap-carousel.js
In my style.css theme file I've got only information about author of theme and this line: #import url('css/bootstrap.min.css');
In turn, my header.php file contains only:
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
How are you loading the scripts? You indicate how you load the stylesheets, but not the scripts themselves. Often bootstrap templates like to include those in the footer.
Leafos great php class
http://leafo.net/lessphp/
helps us compile all less files in to 1 css file and call it in our web/template head.
Now this is a great tool but 1 issue I have with it is;
All my previous joomla work has used following css folder files structure
-css
--style.css
--post.css
--comments.css
--color.css
than in template head I call only style.css and within that file
I used
#import url("post.css");
#import url("comments.css");
#import url("color.css");
Now Joomla 3.1 is including leafos class and bootsrap in core and they will have a default less folder placed in template folder where you should place all your less files to be compiled.
in order for me to convert templates to use less and bootstrap I would have to convert all those css files extensions to less
and move them to less folder ,
what I am trying to preserve is backwards compatibility with pre joomla 3.0 templates and making double files kinda makes no sense.
isnt there any way that lessphp can compile already existing .css files from css folder instead me making double files structure?
something like
$less->checkedCompile("css/style.css", "css/style.css");
instead
$less->checkedCompile("less/style.less", "css/style.css");
I tried
placing style.less in less folder and on top do
#import "../../../media/jui/less/hero-unit.less";
.. all other boostrap depending less files..
#import url("../css/post.css");
but the generated file is compiling all bootstrap files and just including the post.css #import and not compiling it
Hope I did not confuse you to much.
any help is appreciated.
If you are using lessc version 0.4.0
try commenting the following lines that says
// don't import if it ends in css
if (substr_compare($url, '.css', -4, 4) === 0) return false;