{"id":228285,"date":"2022-10-15T15:44:00","date_gmt":"2022-10-15T12:44:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228285"},"modified":"2022-11-09T01:41:00","modified_gmt":"2022-11-08T22:41:00","slug":"sassi-kompileerimine-mitme-ploki-jaoks-veebipaketiga-config","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/sassi-kompileerimine-mitme-ploki-jaoks-veebipaketiga-config\/","title":{"rendered":"Sassi kompileerimine mitme ploki jaoks veebipaketiga Config"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>See artikkel n\u00e4itab n\u00e4idet selle kohta, kuidas kasutada Sassi-faile, mille me seadistame artiklis <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi loomisplokk-skripti veebipaketi konfiguratsiooni laiendamine<\/a> mitme plokiga samas pistikprogrammis. Kui te pole seda artiklit lugenud, lugege see k\u00f5igepealt l\u00e4bi.<\/p>\n<p><strong>See artikkel on m\u00f5eldud ploki skripti loomise vanemale versioonile<\/strong><\/p>\n<p>Kuigi teooriat saab endiselt rakendada, ei pruugi osa selles artiklis sisalduvast teabest enam uusima loomisploki skriptiga \u00fchilduda. <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Meie uuendatud plokiskripti loomise juhendit<\/a> saate vaadata siit .<\/p>\n<p>Meil on ka v\u00e4rskendatud juhend <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">veebipaketile t\u00e4iendavate sisenemispunktide lisamise kohta,<\/a> et saaksite luua mitu CSS-faili.<\/p>\n<h2>Mitme ploki seadistamine<\/h2>\n<p>Nagu ma eelmises artiklis mainisin, v\u00f5imaldab Sassi impordi lisamine pistikprogrammi indeksisse m\u00e4\u00e4ratleda pistikprogrammis mitu plokki, millest iga\u00fchel on oma <code>editor.scss<\/code>ja <code>style.scss<\/code>failid.<\/p>\n<p>Meie seadistatud veebipaketi konfiguratsioon v\u00f5tab iga ploki jaoks failid ja ning kompileerib need pistikprogrammi juurtes olevatesse <code>editor.scss<\/code>ja failidesse .<code>style.scss``\/editor.css``\/style.css<\/code><\/p>\n<p>Selle proovimiseks laseme teisaldada failid <code>\/src\/index.js<\/code>ja <code>\/src\/scss<\/code>failid ja kaustad asukohta <code>\/src\/blocks\/block-one<\/code>, seej\u00e4rel kopeerida see plokk kausta <code>\/src\/blocks\/block-two<\/code>. L\u00f5puks looge uus fail aadressil <code>\/src\/index.js<\/code>.<\/p>\n<p>N\u00fc\u00fcd peaks teil olema j\u00e4rgmine failistruktuur:<\/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>Seej\u00e4rel teeb m\u00f5ned v\u00e4ikesed muudatused <code>\/block-two<\/code>, et see registreeritaks unikaalse plokina. <code>\/src\/blocks\/block-two\/index.js<\/code>Lihtsalt muutke faili j\u00e4rgmist rida j\u00e4rgmiselt :<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes', {\n<\/code><\/pre>\n<p>kellele:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes-2', {\n<\/code><\/pre>\n<p><code>Wholesome Notes<\/code>ja muutke faili nimi nimest <code>Wholesome Notes 2<\/code>:<\/p>\n<pre><code>    title: __(\n        'Wholesome Notes 2',\n        'wcltd'\n    ),\n<\/code><\/pre>\n<h2>Sassi muutmine<\/h2>\n<p>Sisse <code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code>ja <code>\/src\/blocks\/block-two\/scss\/style.scss<\/code>tehke m\u00f5ned v\u00e4iksemad muudatused, et tunneksime koostatud failides tehtud muudatused \u00e4ra.<\/p>\n<p>\u00c4rgem unustagem ka nende failide klasse muutmast, et kasutada uut nimeruumi <code>.wp-block-wcltd-wholesome-notes-2<\/code>.<\/p>\n<p>Siin on minu tehtud muudatused:<\/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>Ei midagi suurep\u00e4rast, lihtsalt vahetasin paar muutunud v\u00e4rvi.<\/p>\n<h2>Indeksifaili seadistamine<\/h2>\n<p>N\u00fc\u00fcd saate faili redigeerida aadressil <code>\/src\/blocks\/index.js<\/code>. Peame lihtsalt importima kaks loodud plokki:<\/p>\n<pre><code>import '.\/blocks\/block-one\/index';\nimport '.\/blocks\/block-two\/index';\n<\/code><\/pre>\n<h2>Tulemuste vaatamine<\/h2>\n<p>N\u00fc\u00fcd k\u00e4ivitame <code>npm start<\/code>ja vaatame v\u00e4ljastatud failide tulemusi.<\/p>\n<p><code>\/editor.css<\/code>Fail n\u00e4eb v\u00e4lja selline :<\/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>Vaadake, kuidas <code>editor.scss<\/code>plugina iga ploki failide Sass on sellesse faili kompileeritud <code>\/editor.css<\/code>.<\/p>\n<p>Vaatame n\u00fc\u00fcd <code>\/style.css<\/code>faili:<\/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>N\u00e4ete <code>style.scss<\/code>, et plugina iga ploki failid on kompileeritud sellesse <code>\/style.css<\/code>faili.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>See artikkel n\u00e4itab n\u00e4idet selle kohta, kuidas kasutada Sassi-faile, mille me seadistame artiklis WordPressi loomisploki skripti veebipaketi konfiguratsiooni laiendamine mitme plokiga samas 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":[718,916,842],"tags":[1165],"class_list":["post-228285","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-muud","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228285"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228285\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224105"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}