I am trying to use https://github.com/primer/css within GitHub pages.
There are some npm commands but I don't know how to import the files to my project folder.
Adding #import "#primer/css/index.scss"; to my style.css file is not sufficient. I need some sass files but I don't know where to find them after running npm install --save #primer/css. I know that the answer is easy and I read about the --prefix option.
I am sure I am missing something trivial but important. Give me a hint!
Using the CDN mentioned in the primer documentation worked for me:
<link rel="stylesheet" href="https://unpkg.com/#primer/css#^20.2.4/dist/primer.css" />
The layout file imports the main.scss file:
<link rel="stylesheet" href="/assets/css/main.css">
The main.scss file imports the required file:
#import url(https://unpkg.com/#primer/css#^20.2.4/dist/primer.css);
Related
I am trying to use Animate.css in my Laravel project. I installed Animate.css using the following command:
npm install animate.css --save
I included it in \resources\sass\app.scss file:
#import "~animate.css/animate.css";
Then I ran the following npm command to compile it into app.css:
npm run dev
When I look into the page source in the browser, animate.css seems to be included but the HTML elements are not animated. Animation seems to be working in Edge but not in Chrome (v81.0.4044.138) or FF (v76.0).
You might have either forgot the JavaScript or didn't configure things correctly. First, install animate.css.
npm i animate.css --save
In bootstrap.js, add 'animate.css'.
window.Popper = require('#popperjs/core').default;
window.$ = window.jQuery = require('jquery');
window.animate = require('animate.css');
In app.scss:
#import "~animate.css/animate";
Create a production-ready build.
npm run prod
Then make sure you are using the correct files.
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>
I am trying to compile my app.scss file that comes with my new project from Laravel, but I want to install Bootstrap 4. At the time of doing my npm run dev does not install Bootstrap 4, but it still has the Bootstrap that Laravel brings by default.
Any recommendations or documentation for this?
In fact Laravel comes with Bootstrap 4 by default. If you take a look at https://github.com/laravel/laravel/blob/master/package.json file (you should have package.json in your project too) you will see line:
"bootstrap": "^4.0.0"
what means Bootstrap 4 will be installed.
You should run
npm install
to install all packages and by default it will install Bootstrap 4.
This ~ sign mean here node_modules directory so in fact line
#import "~bootstrap/scss/bootstrap"
means
#import "node_modules/bootstrap/scss/bootstrap"
If you look in the Laravel welcome.blade.php file, you can see some CSS and a link tag that imports a Google Font. This is not to be confused with actually importing Bootstrap 4.
Heres the steps to take to implement Bootstrap 4, and all the other cool things that come with Laravel by default. It already seems as though you've run npm run watch so I'm going to assume you've run that command.
Simple Steps
Add a link tag to your head element:
<link rel="stylesheet" href="css/app.css">
Add the following at the bottom of your body element:
<script src="js/app.js" charset="utf-8"></script>
That should do it for you. But please make sure you've compiled the SCSS files and Javascript files using the npm run watch command or else it won't work!
Cheers!
I run php artisan make:auth command in laravel 5.3, it generates the scaffolding for me but the view styles are missing.
Login and registered views are not styles, they are just simple html.
Double check source code if the styles links are linked correctly or not ?
Check views code and in there check for the link and script tags . You should use something like this to link the css and scripts etc
{{ url('styles.css') }} It will grab the styles from your app public directory.
In your project_name\resources\views\layouts\app.blade.php view file, just remove first slash in css path - instead of:
<link href="/css/app.css" rel="stylesheet">
put:
<link href="css/app.css" rel="stylesheet">
You will probably need to do the same for js path.
npm install
npm run dev
Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory:
https://laravel.com/docs/5.8/frontend#writing-css
You need load file .css and .js
1) execute in your project
npm install
2) then execute
npm run dev => now in folder /public now exist folder js and css
3) reload page
I have installed Foundation via Bower, and I can use the default foundation.css fine by setting it as main in bower.json, and then it's included in the html automatically. So, now I want to theme my Foundation stuff, but I'm not sure how to do the scss stuff with compass and grunt and all that. How do I accomplish this?
It would be nice to be able to just have foundation work with compass and all that.
Help would be greatly appreciated!
EDIT:
I added this to my bower.json in the foundation package:
"main": [
"scss/foundation.scss"
],
And then grunt adds the bower scss import and I manually added my settings files. I have the following in main.scss:
#import "foundation/settings";
// bower:scss
#import "foundation/scss/foundation.scss";
// endbower
I am importing the settings file and the foundation.scss file and I get no errors, but I don't see any of the styles on the screen at all. Any ideas?
This was related to the bugs with the new version of Sass and Foundation. To fix I had to do:
bower uninstall foundation
Then manually go into bower.json in the root of my project and tell it I wanted Foundation 5.4.3 like so:
"foundation": "zurb/bower-foundation#~5.4.3"
Then just do a bower cache clean and a bower install and it should work again.
I have install the compass_twitter_bootstrap. i import it to my scss file like we import compass.
#import "compass";
#import "compass_twitter_bootstrap";
Importing compass is normal but while importing compass_twitter_bootstrap it overwrite all css in compiled css. Means all the css in bootstrap is imported to style.css. I want it to be work like compass file.
I am really noob in this compass and bootstrap. Any help will be greatly appreciated.
You might have to require it in your config.rb
require 'compass_twitter_bootstrap'