Giters

slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Home Page:https://slinkity.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Document adding styles to your project

opened this issue · comments

commented

What feature were you trying to use?

I wanted to import SASS files and CSS modules into my Slinkity project.

Where did our docs fail you?

I used Vite's documentation to figure out how SASS imports worked, since I couldn't find any resources on Slinkity's own documentation!

How can we improve?

I'd suggest adding a new page to the doc's main navigation called "styling." This page should contain a few topics:

  1. A brief overview of 11ty's passthrough copy options. This is used to copy any asset (including styles) to the build directory of your project. For instance, if you have a styles directory at the base of your project, you can copy over all the contents of that directory using eleventyConfig.addPassthroughCopy('styles')
  2. **How to add css, scss, sass, less, and more to existing pages using link tags. A powerful example would be: open any base layout you haven your project, and add a link tag referencing a file in your build output. For instance, if you had a heading.scss in that styles folder you passthrough copied, you can use it on any page using <link rel="stylesheet" href="/styles/heading.scss">. Yes, you can just say .scss! Vite knows what to do with it.
  3. How to use CSS modules in component files. It's as simple as importing these styles from literally anywhere like so: import styles from './styles/heading.module.css'. Funny enough, you don't even need to passthrough copy CSS modules to the build output! Wherever these files live, styles will get applied correctly.
  4. Anything else I'm missing here!