You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: en/css.md
+30-30Lines changed: 30 additions & 30 deletions
Original file line number
Diff line number
Diff 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
2
2
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 :
4
4
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.
8
8
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 :
10
10
11
-
-Universal authoring experience for client and server.
11
+
-Expérience de création universelle côté client et côté serveur.
12
12
13
-
-Automatic critical CSS when using`bundleRenderer`.
13
+
-Création automatique de CSS critique lors de l'utilisation de`bundleRenderer`.
14
14
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>`.
16
16
17
-
-Common CSS Extraction.
17
+
-Extraction de CSS commun.
18
18
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.
20
20
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`.
22
22
23
-
## Enabling CSS Extraction
23
+
## Activer l'extraction CSS
24
24
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`):
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.
58
58
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 :
60
60
61
61
```js
62
62
module.exports= {
@@ -65,7 +65,7 @@ module.exports = {
65
65
rules: [
66
66
{
67
67
test:/\.css$/,
68
-
// important: use vue-style-loader instead of style-loader
68
+
// important : utilisez `vue-style-loader` à la place de `style-loader`
69
69
use: isProduction
70
70
?ExtractTextPlugin.extract({
71
71
use:'css-loader',
@@ -79,32 +79,32 @@ module.exports = {
79
79
}
80
80
```
81
81
82
-
## Importing Styles from Dependencies
82
+
## Importer des styles depuis les dépendances
83
83
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 :
85
85
86
-
1.It should not be externalized in the server build.
86
+
1.Ils ne devraient pas être externalisés dans un build serveur.
87
87
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 :
89
89
90
90
```js
91
91
module.exports= {
92
92
// ...
93
93
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.
95
95
newwebpack.optimize.CommonsChunkPlugin({
96
96
name:'vendor',
97
97
minChunks:function (module) {
98
-
//a module is extracted into the vendor chunk when...
98
+
//un module est extrait dans un fragment tiers puis...
99
99
return (
100
-
//if it's inside node_modules
100
+
//s'il est a l'intérieur d'un dossier node_modules
101
101
/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
103
103
!/\.css$/.test(module.request)
104
104
)
105
105
}
106
106
}),
107
-
//extract webpack runtime & manifest
107
+
//extraction de l'exécuteur et du manifeste webpack
0 commit comments