-
-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Translate CSS #16
base: main
Are you sure you want to change the base?
Translate CSS #16
Conversation
|
||
## Adding a Global Stylesheet {#adding-a-global-stylesheet} | ||
## Een globaal stylesheet toevoegen {#adding-a-global-stylesheet} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
## Een globaal stylesheet toevoegen {#adding-a-global-stylesheet} | |
## Een globale stylesheet toevoegen {#adding-a-global-stylesheet} |
|
||
In production, all CSS files will be automatically concatenated into a single minified `.css` file. | ||
In productie zullen alle CSS-bestanden automatisch worden samengevoegd tot één verkleind `.css` bestand. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Houden we hier minified of toch verkleind? Ik ben dat laatste nog niet veel tegengekomen.
This behavior makes CSS Modules the ideal way to include component-level CSS. | ||
CSS Module files **can be imported anywhere in your application**. | ||
Dit gedrag maakt CSS Modules de ideale manier om CSS op componentniveau toe te voegen. | ||
CSS Module-bestanden **kunnen overal in uw applicatie worden geïmporteerd**. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CSS Module-bestanden **kunnen overal in uw applicatie worden geïmporteerd**. | |
CSS Module-bestanden **kunnen overal in je applicatie worden geïmporteerd**. |
|
||
First, create `app/components/Button.module.css` with the following content: | ||
Neem bijvoorbeeld het herbruikbare `Button` component in de`components/` map: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Neem bijvoorbeeld het herbruikbare `Button` component in de`components/` map: | |
Neem bijvoorbeeld een herbruikbare `Button` component in de `components/` map: |
CSS Modules are an _optional feature_ and are **only enabled for files with the `.module.css` extension**. | ||
Regular `<link>` stylesheets and global CSS files are still supported. | ||
CSS Modules is een _optionele feature_ en wordt **enkel ingeschakeld voor bestanden met de `.module.css` extensie**. | ||
Gewone `<link>` stylesheets en globale CSS bestanden worden nog steeds ondersteund. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Gewone `<link>` stylesheets en globale CSS bestanden worden nog steeds ondersteund. | |
Gewone `<link>` stylesheets en globale CSS-bestanden worden nog steeds ondersteund. |
Voor consistentie met de rest
|
||
In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files. | ||
These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint. | ||
In productie zullen alle CSS Module-bestanden automatisch worden samengevoegd tot **vele verkleinde en code-split** `.css` bestanden. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Zelfde vraag over minified ...
In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files. | ||
These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint. | ||
In productie zullen alle CSS Module-bestanden automatisch worden samengevoegd tot **vele verkleinde en code-split** `.css` bestanden. | ||
Deze `.css` bestanden vertegenwoordigen hot execution paths in je applicatie, en zorgen ervoor dat de minimale hoeveelheid CSS wordt geladen om je applicatie weer te geven. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Deze `.css` bestanden vertegenwoordigen hot execution paths in je applicatie, en zorgen ervoor dat de minimale hoeveelheid CSS wordt geladen om je applicatie weer te geven. | |
Deze `.css` bestanden stellen hot execution paths voor in je applicatie, en zorgen ervoor dat de minimale hoeveelheid CSS wordt geladen om je applicatie weer te geven. |
Blitz allows you to import Sass using both the `.scss` and `.sass` extensions. | ||
You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension. | ||
Met Blitz kan je zowel via de `.scss` als `.sass` extensies Sass importeren. | ||
Je kan Sass op componentniveau gebruiken via CSS-modules en via een van de twee beschikbare extensies. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Je gebruikt hier CSS-modules en bij de rest CSS Modules. We moeten er één kiezen. Mijn voorkeur gaat uit naar CSS-modules.
Blitz allows you to import Sass using both the `.scss` and `.sass` extensions. | ||
You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension. | ||
Met Blitz kan je zowel via de `.scss` als `.sass` extensies Sass importeren. | ||
Je kan Sass op componentniveau gebruiken via CSS-modules en via een van de twee beschikbare extensies. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Je kan Sass op componentniveau gebruiken via CSS-modules en via een van de twee beschikbare extensies. | |
Je kan Sass op componentniveau gebruiken via CSS-modules en via één van de twee beschikbare extensies. |
|
||
- [@vercel/next-less](https://github.com/vercel/next-plugins/tree/master/packages/next-less) | ||
- [@vercel/next-stylus](https://github.com/vercel/next-plugins/tree/master/packages/next-stylus) | ||
|
||
If using the less plugin, don't forget to add a dependency on less as well, otherwise you'll see an error like: | ||
Als je de less plugin gebruikt vergeet dan niet om ook een dependency van less toe te voegen, anders krijg je een foutmelding zoals: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Als je de less plugin gebruikt vergeet dan niet om ook een dependency van less toe te voegen, anders krijg je een foutmelding zoals: | |
Als je de less plugin gebruikt, vergeet dan niet om ook een dependency op less toe te voegen, anders krijg je een foutmelding zoals: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Zie comments
No description provided.