{"id":228629,"date":"2022-10-15T16:03:00","date_gmt":"2022-10-15T13:03:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228629"},"modified":"2022-11-09T03:22:01","modified_gmt":"2022-11-09T00:22:01","slug":"compiler-sass-pour-plusieurs-blocs-avec-la-configuration-webpack","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/compiler-sass-pour-plusieurs-blocs-avec-la-configuration-webpack\/","title":{"rendered":"Compiler Sass pour plusieurs blocs avec la configuration webpack"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Cet article montre un exemple d&rsquo;utilisation des fichiers Sass que nous avons configur\u00e9s dans l&rsquo;article <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Extension de la configuration du pack Web WordPress Create Block Script<\/a> avec plusieurs blocs dans le m\u00eame plugin. Si vous n&rsquo;avez pas lu cet article, lisez-le d&rsquo;abord.<\/p>\n<p><strong>Cet article concerne une ancienne version du script de cr\u00e9ation de bloc<\/strong><\/p>\n<p>Bien que la th\u00e9orie puisse toujours \u00eatre appliqu\u00e9e, certaines des informations contenues dans cet article peuvent ne plus \u00eatre compatibles avec le dernier script de bloc de cr\u00e9ation. Vous pouvez <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">consulter notre guide de cr\u00e9ation de script de bloc mis \u00e0 jour ici<\/a>.<\/p>\n<p>Nous avons \u00e9galement un guide mis \u00e0 jour sur <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&rsquo;ajout de points d&rsquo;entr\u00e9e suppl\u00e9mentaires au pack Web<\/a> afin que vous puissiez g\u00e9n\u00e9rer plusieurs fichiers CSS.<\/p>\n<h2>Configuration de plusieurs blocs<\/h2>\n<p>Comme je l&rsquo;ai mentionn\u00e9 dans l&rsquo;article pr\u00e9c\u00e9dent, l&rsquo;ajout des importations Sass \u00e0 l&rsquo;index du plugin nous permet de d\u00e9finir plusieurs blocs dans le plugin, chacun avec ses propres fichiers <code>editor.scss<\/code>et .<code>style.scss<\/code><\/p>\n<p>La configuration Webpack que nous avons configur\u00e9e prendra les fichiers <code>editor.scss<\/code>et <code>style.scss<\/code>pour chaque bloc et le compilera dans les fichiers <code>\/editor.css<\/code>et <code>\/style.css<\/code>\u00e0 la racine du plugin.<\/p>\n<p>Pour essayer cela, d\u00e9pla\u00e7ons les fichiers <code>\/src\/index.js<\/code>et <code>\/src\/scss<\/code>dossiers et dans <code>\/src\/blocks\/block-one<\/code>, puis copiez ce bloc dans <code>\/src\/blocks\/block-two<\/code>. Cr\u00e9ez enfin un nouveau fichier dans <code>\/src\/index.js<\/code>.<\/p>\n<p>Vous devriez maintenant avoir la structure de fichiers suivante\u00a0:<\/p>\n<ul>\n<li>\n<p><code>\/src<\/code><\/p>\n<ul>\n<li>\n<p><code>\/blocks<\/code><\/p>\n<ul>\n<li>\n<p><code>\/block-one<\/code><\/p>\n<ul>\n<li>\n<p><code>\/scss<\/code><\/p>\n<ul>\n<li><code>\/editor.scss<\/code><\/li>\n<li><code>\/style.scss<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>\/index.js<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>\/block-two\/<\/code><\/p>\n<ul>\n<li><code>\/scss<\/code>\n<ul>\n<li><code>\/editor.scss<\/code><\/li>\n<li><code>\/style.scss<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>\/index.js<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>\/index.js<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Apportons ensuite quelques modifications mineures \u00e0 <code>\/block-two<\/code>afin qu&rsquo;il soit enregistr\u00e9 en tant que bloc unique. Modifiez simplement la ligne suivante dans le <code>\/src\/blocks\/block-two\/index.js<\/code>fichier \u00e0 partir de\u00a0:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes', {\n<\/code><\/pre>\n<p>\u00e0:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes-2', {\n<\/code><\/pre>\n<p>et changez le nom du fichier de <code>Wholesome Notes<\/code>\u00e0 <code>Wholesome Notes 2<\/code>:<\/p>\n<pre><code>    title: __(\n        'Wholesome Notes 2',\n        'wcltd'\n    ),\n<\/code><\/pre>\n<h2>Modifier le Sass<\/h2>\n<p>In <code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code>et <code>\/src\/blocks\/block-two\/scss\/style.scss<\/code>apportez quelques modifications mineures, afin que nous reconnaissions les changements dans les fichiers compil\u00e9s.<\/p>\n<p>N&rsquo;oublions pas non plus de modifier les classes de ces fichiers pour utiliser le nouvel espace de noms <code>.wp-block-wcltd-wholesome-notes-2<\/code>.<\/p>\n<p>Voici les modifications que j&rsquo;ai apport\u00e9es :<\/p>\n<p><code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code><\/p>\n<pre><code>.wp-block-wcltd-wholesome-notes-2 {\n    border: 1px dotted #0f0;\n}\n<\/code><\/pre>\n<p><code>\/src\/blocks\/block-two\/scss\/style.scss<\/code><\/p>\n<pre><code>.wp-block-wcltd-wholesome-notes-2 {\n    background-color: #fff;\n    color: #000;\n    padding: 2px;\n}\n<\/code><\/pre>\n<p>Rien de grand, j&rsquo;ai juste chang\u00e9 quelques couleurs chang\u00e9es.<\/p>\n<h2>Configuration du fichier d&rsquo;index<\/h2>\n<p>Modifions maintenant le fichier en <code>\/src\/blocks\/index.js<\/code>. Il nous suffit d&rsquo;importer les deux blocs que nous avons cr\u00e9\u00e9s\u00a0:<\/p>\n<pre><code>import '.\/blocks\/block-one\/index';\nimport '.\/blocks\/block-two\/index';\n<\/code><\/pre>\n<h2>Affichage des r\u00e9sultats<\/h2>\n<p>Maintenant, ex\u00e9cutons <code>npm start<\/code>et visualisons les r\u00e9sultats des fichiers g\u00e9n\u00e9r\u00e9s.<\/p>\n<p>Le <code>\/editor.css<\/code>fichier ressemble \u00e0 ceci\u00a0:<\/p>\n<pre><code>\n.wp-block-wcltd-wholesome-notes {\n  border: 1px dotted #f00; }\n\n.wp-block-wcltd-wholesome-notes-2 {\n  border: 1px dotted #0f0; }\n<\/code><\/pre>\n<p>Voyez comment les Sass des <code>editor.scss<\/code>fichiers de chaque bloc du plugin ont \u00e9t\u00e9 compil\u00e9s dans ce <code>\/editor.css<\/code>fichier unique.<\/p>\n<p>Regardons maintenant le <code>\/style.css<\/code>fichier :<\/p>\n<pre><code>\n.wp-block-wcltd-wholesome-notes {\n  background-color: #000;\n  color: #fff;\n  padding: 2px; }\n\n.wp-block-wcltd-wholesome-notes-2 {\n  background-color: #fff;\n  color: #000;\n  padding: 2px; }\n<\/code><\/pre>\n<p>Vous pouvez voir que les <code>style.scss<\/code>fichiers de chaque bloc du plugin ont \u00e9t\u00e9 compil\u00e9s dans ce <code>\/style.css<\/code>fichier unique.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cet article montre un exemple d&rsquo;utilisation des fichiers Sass que nous avons configur\u00e9s dans l&rsquo;article Extension de la configuration du pack Web WordPress Create Block Script avec plusieurs blocs dans le m\u00eame p &#8230;<\/p>\n","protected":false},"author":1,"featured_media":224105,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,717,841],"tags":[1167],"class_list":["post-228629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-developpeur","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=228629"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228629\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224105"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}