Skip to content

Commit 2e4e16f

Browse files
committed
Traduction de css.md
Signed-off-by: Bruno Lesieur <[email protected]>
1 parent 7ab2841 commit 2e4e16f

File tree

2 files changed

+31
-31
lines changed

2 files changed

+31
-31
lines changed

en/SUMMARY.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
- [Hydratation côté client](hydration.md)
77
- [Introduction au moteur de dépaquetage](bundle-renderer.md)
88
- [Configuration de pré-compilation](build-config.md)
9-
- [Gestion des CSS (En)](css.md)
9+
- [Gestion des CSS](css.md)
1010
- [Gestion des entêtes (En)](head.md)
1111
- [Mise en cache (En)](caching.md)
1212
- [Envoi par flux (En)](streaming.md)

en/css.md

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
# Gestion des CSS (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-ssr-docs).*
1+
# Gestion des CSS
22

3-
The recommended way to manage CSS is to simply use `<style>` inside `*.vue` single file components, which offers:
3+
La gestion recommandée pour l'utilisation des CSS est de simplement utiliser une balise `<style>` à l'intérieur d'un fichier de composant monopage `*.vue`. Cela permet :
44

5-
- Collocated, component-scoped CSS
6-
- Ability to leverage pre-processors or PostCSS
7-
- Hot-reload during development
5+
- une sortie CSS limitée au composant,
6+
- la possibilité d'utiliser des pré-processeurs ou PostCSS,
7+
- le rechargement à chaud pendant le développement.
88

9-
More importantly, `vue-style-loader`, the loader used internally by `vue-loader`, has some special features for server rendering:
9+
Plus important encore, `vue-style-loader`, le loader utilisé en interne par `vue-loader`, a plusieurs fonctionnalités pour le rendu côté serveur :
1010

11-
- Universal authoring experience for client and server.
11+
- Expérience de création universelle côté client et côté serveur.
1212

13-
- Automatic critical CSS when using `bundleRenderer`.
13+
- Création automatique de CSS critique lors de l'utilisation de `bundleRenderer`.
1414

15-
If used during a server render, a component's CSS can be collected and inlined in the HTML (automatically handled when using `template` option). On the client, when the component is used for the first time, `vue-style-loader` will check if there is already server-inlined CSS for this component - if not, the CSS will be dynamically injected via a `<style>` tag.
15+
S'il est utilisé pendant le rendu côté serveur, un composant CSS peut être récupéré et injecté dans la source HTML (automatiquement injecté avec l'option `template`). Côté client, quand le composant est utilisé pour la première fois, `vue-style-loader` va vérifier s'il n'y a pas déjà une sortie CSS dans la source HTML pour ce composant ; si non, le CSS va être automatiquement injecté via une balise `<stlye>`.
1616

17-
- Common CSS Extraction.
17+
- Extraction de CSS commun.
1818

19-
This setup support using [`extract-text-webpack-plugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract the CSS in the main chunk into a separate CSS file (auto injected with `template`), which allows the file to be individually cached. This is recommended when there is a lot of shared CSS.
19+
Cette mise en place supporte [`extract-text-webpack-plugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) pour extraire le CSS du fragment principal en un fichier CSS séparé (automatiquement injecté avec l'option `template`), ce qui permet au fichier d'être mis en cache individuellement. Cela est recommandé quand il y a beaucoup de CSS partagés.
2020

21-
CSS inside async components will remain inlined as JavaScript strings and handled by `vue-style-loader`.
21+
Les CSS a l'intérieur des composants asynchrones vont être compilés en tant que chaîne de caractère JavaScript et pris en charge par `vue-style-loader`.
2222

23-
## Enabling CSS Extraction
23+
## Activer l'extraction CSS
2424

25-
To extract CSS from `*.vue` files, use `vue-loader`'s `extractCSS` option (requires `vue-loader>=12.0.0`):
25+
Pour extraire le CSS des fichiers `*.vue`, utilisez l'option `extractCSS` du `vue-loader` (requiert `vue-loader>=12.0.0`) :
2626

2727
``` js
2828
// webpack.config.js
2929
const ExtractTextPlugin = require('extract-text-webpack-plugin')
3030

31-
// CSS extraction should only be enabled for production
32-
// so that we still get hot-reload during development.
31+
// L'extraction CSS devrait uniquement être activée en production
32+
// ainsi vous pourriez utiliser le rechargement à chaud pendant le développement.
3333
const isProduction = process.env.NODE_ENV === 'production'
3434

3535
module.exports = {
@@ -40,23 +40,23 @@ module.exports = {
4040
test: /\.vue$/,
4141
loader: 'vue-loader',
4242
options: {
43-
// enable CSS extraction
43+
// activer l'extraction CSS
4444
extractCSS: isProduction
4545
}
4646
},
4747
// ...
4848
]
4949
},
5050
plugins: isProduction
51-
// make sure to add the plugin!
51+
// assurez-vous d'avoir ajouté le plugin !
5252
? [new ExtractTextPlugin({ filename: 'common.[chunkhash].css' })]
5353
: []
5454
}
5555
```
5656

57-
Note that the above config only applies to styles in `*.vue` files, but you can use `<style src="./foo.css">` to import external CSS into Vue components.
57+
Notez que la configuration ci-dessus est uniquement appliquée pour les styles en provenance des fichiers `*.vue`, mais vous pouvez toujours utiliser `<style src="./foo.css">` pour importer des CSS externes dans des composants Vue.
5858

59-
If you wish to import CSS from JavaScript, e.g. `import 'foo.css'`, you need to configure the appropriate loaders:
59+
Si vous souhaitez importer des CSS depuis le JavaScript, par ex. avec `import 'foo.css'`, vous aurez besoin de configurer les loaders appropriés :
6060

6161
``` js
6262
module.exports = {
@@ -65,7 +65,7 @@ module.exports = {
6565
rules: [
6666
{
6767
test: /\.css$/,
68-
// important: use vue-style-loader instead of style-loader
68+
// important : utilisez `vue-style-loader` à la place de `style-loader`
6969
use: isProduction
7070
? ExtractTextPlugin.extract({
7171
use: 'css-loader',
@@ -79,32 +79,32 @@ module.exports = {
7979
}
8080
```
8181

82-
## Importing Styles from Dependencies
82+
## Importer des styles depuis les dépendances
8383

84-
A few things to take note when importing CSS from an NPM dependency:
84+
Quelques choses que vous devez prendre en note quand vous importez des CSS depuis des dépendances npm :
8585

86-
1. It should not be externalized in the server build.
86+
1. Ils ne devraient pas être externalisés dans un build serveur.
8787

88-
2. If using CSS extraction + vendor extracting with `CommonsChunkPlugin`, `extract-text-webpack-plugin` will run into problems if the extracted CSS in inside an extracted vendors chunk. To work around this, avoid including CSS files in the vendor chunk. An example client webpack config:
88+
2. Si vous utilisez de l'extraction CSS + de l'extraction de CSS tierces avec `CommonsChunkPlugin`, `extract-text-webpack-plugin` va mal fonctionner si le CSS extrait est à l'intérieur d'un extrait de fragment tiers. Pour résoudre cela, évitez d'inclure des fichiers CSS dans un fragment tiers. Voici un exemple de configuration côté client avec webpack :
8989

9090
``` js
9191
module.exports = {
9292
// ...
9393
plugins: [
94-
// it is common to extract deps into a vendor chunk for better caching.
94+
// il est normal d'extraire un fragment tiers pour une meilleure mise en cache.
9595
new webpack.optimize.CommonsChunkPlugin({
9696
name: 'vendor',
9797
minChunks: function (module) {
98-
// a module is extracted into the vendor chunk when...
98+
// un module est extrait dans un fragment tiers puis...
9999
return (
100-
// if it's inside node_modules
100+
// s'il est a l'intérieur d'un dossier node_modules
101101
/node_modules/.test(module.context) &&
102-
// do not externalize if the request is a CSS file
102+
// ne pas l'externaliser si la requête est un fichier CSS
103103
!/\.css$/.test(module.request)
104104
)
105105
}
106106
}),
107-
// extract webpack runtime & manifest
107+
// extraction de l'exécuteur et du manifeste webpack
108108
new webpack.optimize.CommonsChunkPlugin({
109109
name: 'manifest'
110110
}),

0 commit comments

Comments
 (0)