Links function for stylesheets in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the stylesheet correctly in the links function.

Remix

import styles from './styles.css';

export function links() {
  return [{ rel: [1], href: styles }];
}

Drag options to blanks, or click blank then click option'

A"script"

B"style"

C"stylesheet"

D"link"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'script' or 'link' instead of 'stylesheet' for the rel attribute.

Forgetting to import the CSS file before using it.

The rel attribute must be set to "stylesheet" to link CSS files properly.

2fill in blank

medium

Complete the code to return an array with the correct object for linking the stylesheet.

Remix

export function links() {
  return [[1]];
}

Drag options to blanks, or click blank then click option'

A{ rel: "stylesheet", href: "/styles/global.css" }

B{ rel: "script", href: "/styles/global.css" }

C{ rel: "stylesheet", href: "/scripts/app.js" }

D{ rel: "style", href: "/styles/global.css" }

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'script' instead of 'stylesheet' for rel.

Linking to a JavaScript file instead of a CSS file.

The links function must return an array of objects with rel: "stylesheet" and the correct href to the CSS file.

3fill in blank

hard

Fix the error in the links function by completing the blank correctly.

Remix

export function links() {
  return [{ rel: [1], href: "/styles/app.css" }];
}

Drag options to blanks, or click blank then click option'

A"stylesheet"

B"script"

C"link"

D"css"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'script' or 'link' instead of 'stylesheet'.

Using incorrect or unsupported rel values.

The rel attribute must be "stylesheet" to properly link CSS files.

4fill in blank

hard

Fill both blanks to correctly import and link a stylesheet in Remix.

Remix

import [1] from './main.css';

export function links() {
  return [{ rel: [2], href: mainStyles }];
}

Drag options to blanks, or click blank then click option'

AmainStyles

B"script"

C"stylesheet"

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatch between import name and href variable.

Wrong rel attribute value.

Import the CSS file as mainStyles and set rel to "stylesheet" to link it properly.

5fill in blank

hard

Fill all three blanks to import multiple stylesheets and link them in Remix.

Remix

import [1] from './base.css';
import [2] from './theme.css';

export function links() {
  return [
    { rel: [3], href: baseStyles },
    { rel: "stylesheet", href: themeStyles }
  ];
}

Drag options to blanks, or click blank then click option'

AbaseStyles

BthemeStyles

C"stylesheet"

D"style"

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in import and href.

Incorrect rel attribute values.

Import the stylesheets as baseStyles and themeStyles, then link them with rel: "stylesheet".