Sign in Subscribe

Menambahkan CSS Eksternal Ke Dalam Project Remix

Ketika membangun website atau aplikasi pastinya kita akan menggunakan css, dan sebaiknya css dibuat terpisah agar lebih optimal dan efisien. Berikut cara menambahkan file css eksternal ke dalama projek Remix, pada contoh kali ini kita akan menambahkan app.css kedalam projek.

1. Tambahkan folder app/styles dan buat file css kosong bernama app.css.

2. Buka file app/root.jsx lalu tambahkan code berikut

// import { cssBundleHref } from "@remix-run/css-bundle";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import appStyles from './styles/app.css';

// style bawaan kita beri tanda komentar
// export const links = () => [
//   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
// ];

// Kita ganti dengan css yang barusan kita buat
export const links = () => [
  { rel: "stylesheet", href: appStyles },
];

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}
app/root.jsx

Hasil dari { rel: "stylesheet", href: appStyles } sama dengan <link rel="stylesheet" href="./styles/app.css"/>, kamu juga dapat menambah file css lain dengan menambahkan di dalam array links.

3. Mari kita coba menambahkan kode berikut kedalam app.css.

body {
    background-color: #000;
    color:#fff;
}
a {
  color: #eee;
}
app.css

Hasilnya background web akan berubah menjadi hitam, warna teks menjadi putih dan warna url menjadi abu-abu.

Menambahkan CSS per-halaman

Seringkali kita membuat styling css yang hanya digunakan di satu halaman khusus, dari pada membuatnya di file css secara global lebih baik kita pisahkan di file berbeda.

Contohnya kita ingin membuat halaman memiliki warna background abu-abu dan teks bewarna merah.

1. Tambahkan file bernama about.css pada folder app/styles lalu isi dengan code berikut:

body {
    background-color: #eee;
    color:#f40000;
}
a {
  color: #f40000;
}

2. Lalu buka file app/routes/about.jsx dan tambahkan code berikut

...
import aboutStyles from '../styles/about.css';

export const links = () => [
  { rel: "stylesheet", href: aboutStyles },
];
...

Hasilnya ketika kita membuka halaman /about maka warna background abu-abu dan teks bewarna merah tetapi tidak di halaman lain.

Menambahkan CSS di Component

Selain menambahkan css per-halaman kamu juga dapat menambahkan css per-component.

Contohnya kita ingin membuat komponen header dan membuat ukuran teks header menjadi 20px.

1. Tambahkan file baru bernama Header.css di app/styles/components, lalu isi dengan code berikut:

.header {
    font-size: 20px;
}
app/styles/header.css

2. Buat folder baru app/components lalu buat file bernama Header.jsx didalam folder components tadi. Lalu isi dengan code berikut

import headerStyles from '../styles/header.css';

export const links = () => [
    { rel: "stylesheet", href: headerStyles },
  ];

function Header(props) {
    return (
        <h1 className="header">{props.text}</h1>
    );
}
export default Header;
Header.jsx

3. Buka file about.jsx dan sesuaikan code didalamnya seperti ini:

import { Link } from '@remix-run/react';
import Header, { links as headerLinks } from '../components/Header';
import aboutStyles from '../styles/about.css';

export const links = () => [
  { rel: "stylesheet", href: aboutStyles },
  // kita perlu mengimport links dari component
  ...headerLinks()
];

export const meta = () => {
    return [{ title: "About Page" }];
};

export default function Index() {
    return <div>
     <Header text="About Page"/>
     <Link to="/about/team">Go To Team</Link>
    </div>;
}

Hasilnya akan sebagai berikut.

CATATAN

Ini semua tergantung kepada projek dan kebutuhan projek kamu, apakah ingin memecah file css atau menyimpan di dalam satu file css global.

Close

Silahkan Login/Sign Up

😞 Discord eklusif buat member asinkron.com

Jangan khawatir silahkan Daftar GRATIS 😎

*Link discord akan dikirim ke email yang anda gunakan untuk mendaftar.