External CSS inclusion noob question

[Paul-dH]

Hi!

Thanks for building this sweet framework, I'm not a webdeveloper but did get started using Eleventy :)

I have a question though, I'd like to use Now UI Kit in Eleventy and it uses files like below, it seems like Eleventy can't handle external CSS files or links with additions after .css

I Did some testing with them and when I download the css it works.

Like:

{% include "https://fonts.googleapis.com/css?family=Montserrat:400,700,200" %}
{% include "https://use.fontawesome.com/releases/v5.0.6/css/all.css" %}
{% include "assets/css/now-ui-kit.css?v=1.2.0" %}

How can I use the external css or am I doing something wrong? Maybe since the css is minified and directly included in the head tag my approach is not preferred?

Btw: I don't develop locally with NodeJs, I only have a BitBucket repro linked to Netlify. NodeJs is a next step I want to take after leaning some more basics.

Greetings!

[kleinfreund]

Hey!

Includes (i.e. {% include ... %}) are meant to include the contents of local files into a template. This way, you could include local CSS files like assets/css/now-ui-kit.css?v=1.2.0, but there is an easier way:

You can reference external CSS files with the HTML link tag. This allows you to reference stylesheets from different origins (e.g. Google Fonts or Font Awesome) as well.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="/assets/css/now-ui-kit.css?v=1.2.0">

(Note: I changed the reference for the Now UI Kit to start with a slash / character.)

Regarding Node.js: How do you develop locally? You have a directory with your website files somewhere on your computer, right? For now, I don’t think you even need to bother learning anything about Node.js at all. Atleast regarding building a website with Eleventy, you don’t.

[zachleat]

Thank you @kleinfreund! Great answer 👍

Please reopen if you have additional questions @Paul-dH! We try to keep the issue tracker pretty tidy so we close questions after we answer them right away—so don’t feel weird about reopening it or commenting again here.

[Paul-dH]

This worked perfectly! Thanks!

I work in a local folder indeed, then local changes are pushed to Bitbucket and build by Netlify :)