{"id":228116,"date":"2022-10-15T15:48:00","date_gmt":"2022-10-15T12:48:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228116"},"modified":"2022-11-09T00:47:57","modified_gmt":"2022-11-08T21:47:57","slug":"kompilera-sass-foer-flera-block-med-webbpaketet-config","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/kompilera-sass-foer-flera-block-med-webbpaketet-config\/","title":{"rendered":"Kompilera Sass f\u00f6r flera block med webbpaketet Config"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Den h\u00e4r artikeln visar ett exempel p\u00e5 hur du anv\u00e4nder Sass-filerna som vi st\u00e4ller in i artikeln <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Ut\u00f6ka WordPress Create Block Script-webpack Config<\/a> med flera block inom samma plugin. Om du inte har l\u00e4st den artikeln, l\u00e4s den f\u00f6rst.<\/p>\n<p><strong>Den h\u00e4r artikeln \u00e4r f\u00f6r en \u00e4ldre version av Create Block Script<\/strong><\/p>\n<p>\u00c4ven om teorin fortfarande kan till\u00e4mpas, kanske en del av informationen i den h\u00e4r artikeln inte l\u00e4ngre \u00e4r kompatibel med det senaste skapa blockskriptet. Du kan <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">se v\u00e5r uppdaterade Skapa Block-skriptguide h\u00e4r<\/a>.<\/p>\n<p>Vi har ocks\u00e5 en uppdaterad guide om <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">att l\u00e4gga till ytterligare ing\u00e5ngspunkter till webpack<\/a> s\u00e5 att du kan skapa flera CSS-filer.<\/p>\n<h2>Konfigurera flera block<\/h2>\n<p>Som jag n\u00e4mnde i den f\u00f6reg\u00e5ende artikeln, genom att l\u00e4gga till Sass-importerna till plugin-indexet kan vi definiera flera block i plugin-programmet, var och en med sina egna <code>editor.scss<\/code>och <code>style.scss<\/code>filer.<\/p>\n<p>Webpack-konfigurationen som vi har st\u00e4llt in kommer att ta <code>editor.scss<\/code>och <code>style.scss<\/code>-filerna f\u00f6r varje block och kompilera dem till <code>\/editor.css<\/code>och <code>\/style.css<\/code>-filerna i roten av plugin-programmet.<\/p>\n<p>F\u00f6r att prova detta, l\u00e5t oss flytta filerna <code>\/src\/index.js<\/code>och <code>\/src\/scss<\/code>mappar och till <code>\/src\/blocks\/block-one<\/code>och sedan kopiera detta block till <code>\/src\/blocks\/block-two<\/code>. Skapa slutligen en ny fil p\u00e5 <code>\/src\/index.js<\/code>.<\/p>\n<p>Du b\u00f6r nu ha f\u00f6ljande filstruktur:<\/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>L\u00e5t oss sedan g\u00f6ra n\u00e5gra mindre \u00e4ndringar <code>\/block-two<\/code>s\u00e5 att det registreras som ett unikt block. \u00c4ndra helt enkelt f\u00f6ljande rad i <code>\/src\/blocks\/block-two\/index.js<\/code>filen fr\u00e5n:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes', {\n<\/code><\/pre>\n<p>till:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes-2', {\n<\/code><\/pre>\n<p>och \u00e4ndra namnet p\u00e5 filen fr\u00e5n <code>Wholesome Notes<\/code>till <code>Wholesome Notes 2<\/code>:<\/p>\n<pre><code>    title: __(\n        'Wholesome Notes 2',\n        'wcltd'\n    ),\n<\/code><\/pre>\n<h2>\u00c4ndra Sass<\/h2>\n<p>In <code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code>och <code>\/src\/blocks\/block-two\/scss\/style.scss<\/code>g\u00f6r n\u00e5gra mindre \u00e4ndringar, s\u00e5 att vi kommer att k\u00e4nna igen \u00e4ndringarna i de kompilerade filerna.<\/p>\n<p>L\u00e5t oss inte heller gl\u00f6mma att \u00e4ndra klasserna i dessa filer f\u00f6r att anv\u00e4nda det nya namnomr\u00e5det <code>.wp-block-wcltd-wholesome-notes-2<\/code>.<\/p>\n<p>H\u00e4r \u00e4r \u00e4ndringarna jag gjorde:<\/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>Inget stort, jag \u00e4ndrade bara n\u00e5gra f\u00e4rger.<\/p>\n<h2>St\u00e4lla in indexfilen<\/h2>\n<p>L\u00e5t oss nu redigera filen p\u00e5 <code>\/src\/blocks\/index.js<\/code>. Vi beh\u00f6ver bara importera de tv\u00e5 blocken vi har skapat:<\/p>\n<pre><code>import '.\/blocks\/block-one\/index';\nimport '.\/blocks\/block-two\/index';\n<\/code><\/pre>\n<h2>Visa resultaten<\/h2>\n<p>L\u00e5t oss nu k\u00f6ra <code>npm start<\/code>och se resultatet av de utmatade filerna.<\/p>\n<p>Filen <code>\/editor.css<\/code>ser ut s\u00e5 h\u00e4r:<\/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>Se hur Sass fr\u00e5n <code>editor.scss<\/code>filerna i varje block i pluginet har kompilerats till denna enda <code>\/editor.css<\/code>fil.<\/p>\n<p>L\u00e5t oss nu titta p\u00e5 <code>\/style.css<\/code>filen:<\/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>Du kan se att <code>style.scss<\/code>filerna f\u00f6r varje block i plugin-programmet har kompilerats till denna enda <code>\/style.css<\/code>fil.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Den h\u00e4r artikeln visar ett exempel p\u00e5 hur man anv\u00e4nder Sass-filerna som vi st\u00e4ller in i artikeln Ut\u00f6ka WordPress Create Block Script-webpack Config med flera block inom samma 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":[848,922,724],"tags":[1173],"class_list":["post-228116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-oevrig","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228116"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224105"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}