{"id":228176,"date":"2022-10-15T16:18:00","date_gmt":"2022-10-15T13:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228176"},"modified":"2022-11-09T01:07:18","modified_gmt":"2022-11-08T22:07:18","slug":"kompilacja-sass-dla-wielu-blokow-za-pomoca-webpack-config","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/kompilacja-sass-dla-wielu-blokow-za-pomoca-webpack-config\/","title":{"rendered":"Kompilacja Sass dla wielu blok\u00f3w za pomoc\u0105 webpack Config"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Ten artyku\u0142 pokazuje przyk\u0142ad, jak korzysta\u0107 z plik\u00f3w Sass, kt\u00f3re skonfigurowali\u015bmy w artykule <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Rozszerzanie konfiguracji webpacka WordPress Create Block Script<\/a> o wiele blok\u00f3w w tej samej wtyczce. Je\u015bli nie czyta\u0142e\u015b tego artyku\u0142u, przeczytaj go najpierw.<\/p>\n<p><strong>Ten artyku\u0142 dotyczy starszej wersji skryptu tworzenia bloku<\/strong><\/p>\n<p>Chocia\u017c teori\u0119 mo\u017cna nadal zastosowa\u0107, niekt\u00f3re informacje zawarte w tym artykule mog\u0105 nie by\u0107 ju\u017c zgodne z najnowszym skryptem tworzenia bloku. Tutaj mo\u017cesz <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zapozna\u0107 si\u0119 z naszym zaktualizowanym przewodnikiem tworzenia skrypt\u00f3w blokowych<\/a>.<\/p>\n<p>Mamy r\u00f3wnie\u017c zaktualizowany przewodnik dotycz\u0105cy <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dodawania dodatkowych punkt\u00f3w wej\u015bcia do pakietu internetowego<\/a>, dzi\u0119ki czemu mo\u017cna wygenerowa\u0107 wiele plik\u00f3w CSS.<\/p>\n<h2>Konfigurowanie wielu blok\u00f3w<\/h2>\n<p><code>editor.scss<\/code>Jak wspomnia\u0142em w poprzednim artykule, dodanie import\u00f3w Sass do indeksu wtyczki pozwala nam zdefiniowa\u0107 wiele blok\u00f3w we wtyczce, ka\u017cdy z w\u0142asnymi <code>style.scss<\/code>plikami.<\/p>\n<p>Konfiguracja webpacka, kt\u00f3r\u0105 skonfigurowali\u015bmy, pobierze pliki <code>editor.scss<\/code>i <code>style.scss<\/code>dla ka\u017cdego bloku i skompiluje je do plik\u00f3w <code>\/editor.css<\/code>i <code>\/style.css<\/code>w katalogu g\u0142\u00f3wnym wtyczki.<\/p>\n<p>Aby to wypr\u00f3bowa\u0107, przenie\u015b <code>\/src\/index.js<\/code>i <code>\/src\/scss<\/code>pliki i foldery do <code>\/src\/blocks\/block-one<\/code>, a nast\u0119pnie skopiuj ten blok do <code>\/src\/blocks\/block-two<\/code>. Na koniec utw\u00f3rz nowy plik pod adresem <code>\/src\/index.js<\/code>.<\/p>\n<p>Powiniene\u015b mie\u0107 teraz nast\u0119puj\u0105c\u0105 struktur\u0119 plik\u00f3w:<\/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>Nast\u0119pnie dokonajmy drobnych zmian, aby <code>\/block-two<\/code>zosta\u0142 zarejestrowany jako unikalny blok. Po prostu zmie\u0144 nast\u0119puj\u0105cy wiersz w <code>\/src\/blocks\/block-two\/index.js<\/code>pliku z:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes', {\n<\/code><\/pre>\n<p>do:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes-2', {\n<\/code><\/pre>\n<p>i zmie\u0144 nazw\u0119 pliku z <code>Wholesome Notes<\/code>na <code>Wholesome Notes 2<\/code>:<\/p>\n<pre><code>    title: __(\n        'Wholesome Notes 2',\n        'wcltd'\n    ),\n<\/code><\/pre>\n<h2>Zmiana Sassa<\/h2>\n<p>W <code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code>i <code>\/src\/blocks\/block-two\/scss\/style.scss<\/code>wprowad\u017a kilka drobnych poprawek, dzi\u0119ki kt\u00f3rym rozpoznamy zmiany w skompilowanych plikach.<\/p>\n<p>Nie zapomnij te\u017c zmieni\u0107 klas w tych plikach tak, aby u\u017cywa\u0142y nowej przestrzeni nazw <code>.wp-block-wcltd-wholesome-notes-2<\/code>.<\/p>\n<p>Oto poprawki, kt\u00f3re wprowadzi\u0142em:<\/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>Nic wielkiego, po prostu zmieni\u0142em kilka zmienionych kolor\u00f3w.<\/p>\n<h2>Konfigurowanie pliku indeksu<\/h2>\n<p>Teraz edytujmy plik w <code>\/src\/blocks\/index.js<\/code>. Musimy tylko zaimportowa\u0107 dwa utworzone przez nas bloki:<\/p>\n<pre><code>import '.\/blocks\/block-one\/index';\nimport '.\/blocks\/block-two\/index';\n<\/code><\/pre>\n<h2>Przegl\u0105danie wynik\u00f3w<\/h2>\n<p>Teraz uruchommy <code>npm start<\/code>i przejrzyjmy wyniki wygenerowanych plik\u00f3w.<\/p>\n<p>Plik <code>\/editor.css<\/code>wygl\u0105da tak:<\/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>Zobacz, jak Sass z <code>editor.scss<\/code>plik\u00f3w ka\u017cdego bloku we wtyczce zosta\u0142 skompilowany do tego pojedynczego <code>\/editor.css<\/code>pliku.<\/p>\n<p>Teraz sp\u00f3jrzmy na <code>\/style.css<\/code>plik:<\/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>Mo\u017cesz zobaczy\u0107, \u017ce <code>style.scss<\/code>pliki ka\u017cdego bloku we wtyczce zosta\u0142y skompilowane w ten pojedynczy <code>\/style.css<\/code>plik.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W tym artykule pokazano przyk\u0142ad, jak korzysta\u0107 z plik\u00f3w Sass, kt\u00f3re skonfigurowali\u015bmy w artykule Rozszerzanie konfiguracji webpacka WordPress Create Block Script o wiele blok\u00f3w w tym samym 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":[721,919,845],"tags":[1169],"class_list":["post-228176","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228176"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228176\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224105"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}