|
| 1 | +--- |
| 2 | +nav_order: 5 |
| 3 | +title: CSS loading |
| 4 | +image: "/assets/social-square.png" |
| 5 | +--- |
| 6 | + |
| 7 | +## CSS Loading |
| 8 | + |
| 9 | +**Beta** |
| 10 | + |
| 11 | +Bun doesn't ship with a CSS loader. They have it on [the roadmap](https://github.com/oven-sh/bun/issues/159){:target="\_blank"} but no release date is known at this time. |
| 12 | + |
| 13 | +We provide a custom CSS loader plugin that just works™. Built on top of [Lightning CSS](https://lightningcss.dev/). Just use the `x-import` directive to load a css file directly. Bundle transpiles them and injects it on your page with zero effort. |
| 14 | + |
| 15 | +```html |
| 16 | +<x-import module="tippy.js" as="tippy" /> |
| 17 | +<x-import module="tippy.js/dist/tippy.css" /> |
| 18 | +``` |
| 19 | + |
| 20 | +Because we use Bun as a runtime when processing your files there is no need to install Lightning CSS as a dependency. When Bun encounters a import that is not installed it will fall back to it's on internal [module resolution algorithm](https://bun.sh/docs/runtime/autoimport) & install the dependency on the fly. |
| 21 | + |
| 22 | +That being said; We do recommend installing Lightning CSS in your project. |
| 23 | + |
| 24 | +```bash |
| 25 | +npm install lightningcss --save-dev |
| 26 | +``` |
| 27 | + |
| 28 | +### Sass |
| 29 | + |
| 30 | +[Sass](https://sass-lang.com/) is supported out of the box. Just like with Lightning CSS you don't have to install Sass as a dependency, but it is recommended. |
| 31 | + |
| 32 | +```bash |
| 33 | +npm install lightningcss --save-dev |
| 34 | +``` |
| 35 | + |
| 36 | +Note that compiled Sass is processed with LightningCSS afterwards, so if you plan on only processing scss files it is recommended to install both Lightning CSS & Sass. |
| 37 | + |
| 38 | +### Local CSS loading |
| 39 | + |
| 40 | +This works similar to [local modules](https://laravel-bundle.dev/local-modules.html). Simply add a new path alias to your `jsconfig.json` file. |
| 41 | + |
| 42 | +```json |
| 43 | +{ |
| 44 | + "compilerOptions": { |
| 45 | + "paths": { |
| 46 | + "~/css": ["./resources/css/*"] |
| 47 | + } |
| 48 | + } |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +Now you can load css from your resources directory. |
| 53 | + |
| 54 | +```html |
| 55 | +<x-import module="css/foo-bar.css" /> |
| 56 | +``` |
| 57 | + |
| 58 | +### Browser targeting |
| 59 | + |
| 60 | +Bundle automatically compiles many modern CSS syntax features to more compatible output that is supported in your target browsers. This includes some features that are not supported by browsers yet, like nested selectors & media queries, without using a preprocessor like Sass. [Check here](https://lightningcss.dev/transpilation.html#syntax-lowering) for the list of the many cool new syntaxes Lightning CSS supports. |
| 61 | + |
| 62 | +You can define what browsers to target using your `package.json` file: |
| 63 | + |
| 64 | +```json |
| 65 | +{ |
| 66 | + "browserslist": ["last 2 versions", ">= 1%", "IE 11"] |
| 67 | +} |
| 68 | +``` |
| 69 | + |
| 70 | +<br/> |
| 71 | + |
| 72 | +{: .note } |
| 73 | + |
| 74 | +> Bundle currently only supports browserslist using your `package.json` file. A dedicated `.browserslistrc` is not suppported at this time. |
0 commit comments