I tried to add fontawesome to my laravel mdbvue environment
When I install mdbvue
npm install mdbvue
fontawesome will automatically be added to my package-lock.json and exists in the node_modules folder in #fortawesome.
Now I want to implement fontawesome. But how?
I tried something without success:
import '#fortawesome/fontawesome-free/css/all.min.css';
#import '#fortawesome/fontawesome-free/css/all.min.css';
Info: When I add
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
to my html-header it works.
Edit:
There seems to be a difference between using xampp and php artisan serve. When I use the last one, all icons are displayed correctly.
The package vuemdb changes the default name
So import fontawesome by the relative path in your app.scss
#import '#fortawesome/fontawesome-free/scss/fontawesome.scss';
According to this article importing fontawesome in resources/js/app.js file should work.
Related
I am working on a laravel project and had written some CSS codes inapp.css. When I started building Vue components, the app.css codes stopped being rendered. The file is being fetched as <link href="{{ asset('/css/app.css') }}" rel="stylesheet">. The CSS does not reflect but font-awesome icons which are fetched in the same way are appearing. What could make this happen?
`
If I am reading your question correctly I will make a couple of assumptions and give what I think may have happened.
I read you edited app.css and then worked with your compiled system.
I am guessing you did this via npm run dev or a variation there of.
Upon doing this, it writes a new app.css file based on your app.scss file.
So, I am thinking that when you compiled your app you wiped out app.css as it should and rewrote the app.css with the build out of app.scss.
You should be having your css in app.scss or in a file that #import that file.
And to then to compile your css with npm run dev, npm run prod, or npm run watch
If you want to mix in css with app.scss you can either use the #import mentioned above or combine them via webpack.
To add font awesome to the app.css you do so with:
npm i #fortawesome/fontawesome-free
Add the following to app.scss:
// Font Awesome
#import "~#fortawesome/fontawesome-free/scss/fontawesome";
#import "~#fortawesome/fontawesome-free/scss/regular";
#import "~#fortawesome/fontawesome-free/scss/brands";
#import "~#fortawesome/fontawesome-free/scss/solid";
#import "~#fortawesome/fontawesome-free/scss/v4-shims";
Compile with npm run dev or npm run prod
https://laravel.com/docs/7.x/mix#sass
https://laravel.com/docs/7.x/mix#plain-css
I've got a Laravel project, and am trying to use flatpickr in it as per the following page:
https://flatpickr.js.org/getting-started/
I was able to install flatpickr via npm i flatpickr --save and properly import it into the JS code and use it via import flatpickr from "flatpickr";, but my question is: How do I get the CSS into the project as well?
I ended up using the following HTML link tag referenced in the flatpickr docs link above:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
But I'm wondering if there is a better way to get the CSS for flatpickr into my project.
That is, when you use npm to install a package and import it into JS, is there something similar for the CSS, or are we required to include the CSS using a traditional link tag and that's our only option?
I couldn't find anything in the docs or via Google on how to do this, so I'm really left wondering. Thanks.
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js(['resources/js/app.js', 'node_modules/flatpickr/dist/flatpickr.js'], 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.stylus('node_modules/flatpickr/src/style/flatpickr.styl', 'public/css');
run npm run dev
results in js/app.js and css/flatpickr.css
...or you could just add
#import '~flatpickr/dist/flatpickr.css';
to
resources/sass/app.scss
and run
npm run dev
Then you get all of your css (Bootstrap/flatpickr) in one file public/css/app.css
Now March 2021, if using Laravel and the newer Laravel mix with npx mix and TailwindCSS, you may add flatpickr to app.css file with:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import 'flatpickr/dist/flatpickr.css';
Note: All #import's must go before any other content in the app.css file.
I want to customize Bootstrap 4 theme such as colors, fonts, etc..
I read the instructions from Bootstrap website saying that I need to create custom.scss file and import Bootstrap’s source Sass files like this
// Custom.scss
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
I'm new to both Sass and NodeJS and I do not know how to get started with a NodeJS and Sass project.
I went as far as installing NodeJS and Sass on my Mac using brew. I also installed Bootstrap by typing:
npm install bootstrap
This is the most progress I have made. I do not know in which path the bootstrap files are installed when I did the command npm install bootstrap and also I do not know how to bring that Bootstrap installation into my project folder.
Could anyone please provide some information or point me to a resource on how to get started with a NodeJS and Sass project so I can customize Bootstrap 4 theme using Sass.
You have to run the npm install bootstrap command inside your project directory. Bootstrap and its files will then be installed into the directory node_modules/bootstrap inside your project directory.
Now, when placing your custom scss files into this folder, they will be able to access the node_modules directory, in which bootstrap is.
You can then create a custom building pipeline using npm tools for compiling scss files to css. This requires more in-depth knowledge on node.js and NPM, but that is the usual and recommended way of doing it.
If you just want to compile the scss once and work with the css from there without having to use node.js more in depth, you can use packages like scss-compile and then use console commands like node-sass -rw scssFiles -o cssOutputFiles to compile your custom theme once.
I've had this issue lately on other developers SASS projects where the Google CDN import won't compile -- See screenshots, saves fine when commented out.
I read a few articles on this issue and it was suggested to do this command:
gem install compass
I don't use compass, I use a SASS plugin for Coda. Guessing the previous developer used Compass to compile? Figured this might help the compiling issue.
The Sass import code should look like this:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700);
You are importing from an URL, but your code is written as if you were importing a local file—that is why the error message says it can't be found.
Here's a little tutorial on how to use Google fonts with Sass.
We can import separate Sass file in .scss
For example we have two file one in local directory of project and other one in on CDN server/online server (such as google fonts).
local file: css/nameofstylsheet.scss
&
Online Server: http://fonts.googleapis.com/cssfamily=Open+Sans:300italic,400italic,700italic,400,300,700);
we used them as:
#import "css/nameofstylsheet.scss";
#import url(http://fonts.googleapis.com/cssfamily=Open+Sans:300italic,700italic,400,300,700);
The import code should look like this:
#import url('https://fonts.googleapis.com/css2?family=Spartan&display=swap');
Or you can link the font file directly in your html with the link tag as:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">
I am fairly new to ember and very new to the build tools. I am currently using the usual foundation install with the foundation cli and compass to compile my css, this is a bit of a pain and is very bad for working on a team. I thought it would be better to install the files with bower and use ember-cli-compass-compiler as stated in the docs but its not working as expected. I would like to have the app.scss file in the app/styles directory and import all the required foundation components within that file. I would also like to keep the _settings.scss component within the app/styles directory so it can be easily shared.
E.g
#import "settings";
#import "vendor/foundation/scss/foundation";
However this gives me the error File to import not found or unreadable: vendor/foundation/scss/foundation.
I can assure you that the foundation.scss file in the vendor directory does exist. I have also tried importing the file using app.import() in the Brocfile.js but with no avail.
If you want to use the .scss version of Foundation, you should first configure your project to use broccoli-sass with:
npm install --save-dev broccoli-sass
and then rename your app/styles/app.css to app/styles/app.scss.
Then you can install Foundation using Bower with:
bower install --save-dev foundation
Now, inside your app/styles/app.scss, you can import the Foundation styles with:
#import 'bower_components/foundation/scss/normalize';
#import 'bower_components/foundation/scss/foundation';
Just recently released ember-cli addon for foundation
Here: https://github.com/artificialio/ember-cli-foundation-sass
and here: https://www.npmjs.org/package/ember-cli-foundation-sass.
Hope it helps!
The accepted answer did not work for me. If that is the case for any other developers then this answer might help.
First, install ember-cli-sass addon
npm install --save-dev ember-cli-sass
Next, install foundation
bower install --save-dev foundation
At this point you might want to rename your app.css to either app.scss or app.sass.
Next, tell ember cli to include the foundation Sass files just installed in the asset pipeline building process. Add the following code in ember-cli-build.js
var app = new EmberApp({
sassOptions: {
includePaths: [
'bower_components/foundation/scss'
]
}
});
In your app.scss file, import foundation using the following line of code
#import 'foundation';
If you do not want to import all of foundation but bits of it, then you can do so by importing the appropriate component e.g. #import 'foundation/fuctions'
This is worked for me well! Just install following package,
npm install --save-dev ember-cli-foundation