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
Related
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 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 am working on a Laravel 5.5 project with Bootstrap 4. When I compile SASS it returns me that everything it's ok but the imported CSS file is not being watched by SASS.
I have this file /resources/assets/sass/app.scss:
// Variables
#import "variables";
// Bootstrap
#import "~bootstrap/scss/bootstrap";
// Bootstrap Toggle
// #import "/resources/assets/css/bootstrap-toggle.css"
// CSS
#import "/resources/assets/css/app.css" <- I want this file to be compiled
When I compile SASS with npm run watch or npm run dev and I save the previous file the console shows me how it is compiled successfully like this:
As a test, when I change "app.css" to "app.csss", the console displays an error when compiling, so the file it is being loaded.
But when I save something in that file app.css nothing changes, I've tried even to clear the browser's cache but the console shows me nothing. So the file is not being compiled.
What am I doing wrong?
I am using yarn with my rails 5.1 app (not webpacker, just the default asset pipeline).
Running a local server in development environment, I experience no issues with my assets.
But as soon as I precompile my assets (the environment doesn't matter) or let Heroku package my assets, all stylesheets (of node modules) I imported from within my application.sass file don't work anymore.
The reason for that behavior is that sass compiles all files into one output file, but because of some reason appears to miss the #import statements which include node modules and load these files separately.
So this:
#import "components/index.sass"
#import "nodemodule/nodemodule.css"
Compiles to this in development:
// content of "components/index.sass"
// content of "nodemodule/nodemodule.css"
and to this in production:
// content of "components/index.sass"
#import "nodemodule/nodemodule.css"
while loading node_module/nodemodule.css separately as an asset, but the browser cannot resolve it. Javascript works fine.
The links are from my project that you can use as reference
in your asset.rb you need to include the /node_modules path in your default load_path.
If you open the rails console and input Rails.application.config.assets.paths you should see the new path /yourproject/node_modules added.
Then you simply write:
#import "nodemodule.css"
In my case for bootstrap 4 in my application.scss
#import bootstrap/scss/bootstrap
which correspond to the file in node_modules/bootstrap/scss/bootstrap.scss
for jquery.js and bootstrap.js you can check my application.js
I was having the same problem. Inspired by this comment removing file extensions from the imports ended up fixing it.
This didn't work:
#import "#shopify/polaris/styles.css";
#import "#uppy/core/dist/style.css";
#import "#uppy/dashboard/dist/style.css";
while this did:
#import "#shopify/polaris/styles";
#import "#uppy/core/dist/style";
#import "#uppy/dashboard/dist/style";
The node_modules need to be installed with npm install for example, so they're probably not getting installed on Heroku. Check out https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app
Most likely, you need to setup a Node.js buildpack which will install your npm dependencies.
I have finally found the problem. It is a very nasty bug of the sass-rails gem & an unfortunate design of the sprockets component of Rails.
1) sass-rails
#import does not seem to work with node_modules as it does with other assets. While those other assets get compiled into one file, node_modules only get referenced, loaded by the browser as separate sources, but ultimately not being used by the browser.
2) sprockets
Sprockets' require statement does only work if it is at the beginning of a file. Or as they put it in their documentation:
Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the "header" of the document it will not do anything, and won't raise any errors.
However, in my case, I was importing directives from a file that itself was imported from application.sass.
I am trying to include foundation from bower in my recent Wordpress project.
I am under underscores.js for a theme.
In the bottom of my styles.scss:
#import "../../../../../src/foundation-sites/assets/foundation.scss";
Then in my /src/foundation-sites/assets/foundation.scss:
#import ‘../scss/foundation';
#include foundation-everything;
where ../scss/foundation' is where myfoundation.scss` file is.
Yet still no CSS is included in the resulting compile.. only the header.
I've tried re-installing from bower, and the only changes I make are to assets/foundation.scss.
Even then, it seems weird to have to make changes to something in the bower install directory, but assets/foundation.scss is pointing to the wrong file.
What am I missing?
I managed to get this working by importing the foundation.scss file from the scss folder and using #include foundation-everything in my style.scss.