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">
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 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 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've built my portfolio site off of Github Pages. Now that I'm starting portfolio 2.0, I want to use Sass.
I've used Sass in the past but didn't have to set it up directly. So far I've installed Sass using gem install sass and have my file setup, but am not sure how to compile it properly.
File Structure:
styles.css
scss/
_banner.scss
Styles.css content:
#import 'scss/_banner';
Am I missing the compiling step somewhere? It is even possible to use Sass on Github Pages?
For my solution I replaced scss/_banner.scss with styles.scss, opting to not create partial files for a single page application.
Then all you have to do is run $ sass --watch css/styles.scss:css/styles.css in the terminal and your CSS will be compiled each time you save your Sass file. This command points your computer to which file to compile and to where.
Thanks to #dommmm for directing me to the solution with the youtube video in the question comments.