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.
Related
So, the basic usage of SASS in react is
Install node-sass and import ./mysass.scss in index.js file
I did the same it worked with bootstrap SASS.
I have successfully imported bootstrap.scss in index.js file
import 'bootstrap/scss/bootstrap.scss';
But, now if I try to import mine it did not work.
Let me give you some information about my SASS files.
My style.scss file importing other CSS modules by using #use instead of #import in sass.
For example
Using -> `#use 'sections/navbar';`
Instead of -> `#import 'sections/navbar';`
I am also using #use "sass:map";
Does this #use create the problem?
I have checked the bootstrap.scss file and they are using #import.
See this issue on Github: Link. Solution posted by user asyncLiz.
That error is typically seen when using the node-sass implementation, which does not support Sass modules and is not supported by MDC. You'll need to use the Dart sass implementation.
Luckily it's an easy replacement when using sass-loader. Run npm uninstall node-sass && npm install sass. sass-loader will automatically use the new implementation.
If it does not, check your webpack.config.js in case you're manually specifying the implementation in your sass-loader options. If you are, change implementation: require('node-sass') to implementation: require('sass').
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 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.
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