{"id":345729,"date":"2022-07-27T08:44:59","date_gmt":"2022-07-27T08:44:59","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=345729"},"modified":"2024-04-05T07:06:35","modified_gmt":"2024-04-05T07:06:35","slug":"how-to-add-custom-css-preprocessor-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/","title":{"rendered":"How to add custom CSS Preprocessor in Magento 2"},"content":{"rendered":"\n

A CSS preprocessor is\u00a0a program that lets you generate CSS from the preprocessor’s own unique syntax. The benefit of the CSS preprocessor is to avoid duplication of the code by adding global variables. <\/p>\n\n\n\n

Aslo, those variables can be useful anywhere if you want in CSS by converting into CSS by the compiler. In this blog, we will look at adding the Sass preprocessor.<\/p>\n\n\n\n

Step 1<\/strong>:- Install the dependency sass compiler by composer<\/p>\n\n\n\n

composer require leafo\/scssphp<\/pre>\n\n\n\n
Step 2: –<\/strong>Create a module in the app\/code folder by creating registration.php in app\/code\/Webkul\/CssPreprocessor\/ and module.xml in the app\/code\/Webkul\/CssPreprocessor\/etc.<\/p>\n\n\n\n
If you don’t know how to create a module please refer to this link  https:\/\/webkul.com\/blog\/magento-development-01-module-registration\/<\/a><\/p>\n\n\n\n
registration.php<\/p>\n\n\n\n
<?php\n\/**\n * Copyright \u00a9 2016 Magento. All rights reserved.\n * See COPYING.txt for license details.\n *\/\n\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n    \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n    'Webkul_CssPreprocessor',\n    __DIR__\n);<\/pre>\n\n\n\n
module.xml<\/p>\n\n\n\n
<?xml version="1.0"?>\n<!--\n\/**\n * Copyright \u00a9 2016 Magento. All rights reserved.\n * See COPYING.txt for license details.\n *\/\n-->\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module\/etc\/module.xsd">\n    <module name="Webkul_CssPreprocessor">\n    <\/module>\n<\/config><\/pre>\n\n\n\n
And finally, enable the module and run php bin\/magento setup:upgrade<\/p>\n\n\n\n
Step 3:- <\/strong> After creating the module, you have to create Processor.php in the following path app\/code\/Webkul\/CssPreprocessor\/Preprocessor\/Adapter\/Scss\/ and add the following code to tell the Magento to compile the following sass file to CSS at the time of static site deploy .<\/p>\n\n\n\n
<?php\n\/**\n * Copyright \u00a9 2016 Magento. All rights reserved.\n * See COPYING.txt for license details.\n *\/\nnamespace Webkul\\CssPreprocessor\\Preprocessor\\Adapter\\Scss;\n\nuse Psr\\Log\\LoggerInterface;\nuse Magento\\Framework\\Phrase;\nuse Magento\\Framework\\View\\Asset\\File;\nuse Magento\\Framework\\View\\Asset\\Source;\nuse Magento\\Framework\\View\\Asset\\ContentProcessorInterface;\nuse Leafo\\ScssPhp\\Compiler;\n\n\/**\n * Class Processor\n *\/\nclass Processor implements ContentProcessorInterface\n{\n    \/**\n     * @var LoggerInterface\n     *\/\n    private $logger;\n\n    \/**\n     * @var Source\n     *\/\n    private $assetSource;\n\n    \/**\n     * Constructor\n     *\n     * @param Source $assetSource\n     * @param LoggerInterface $logger\n     *\/\n    public function __construct(Source $assetSource, LoggerInterface $logger)\n    {\n        $this->assetSource = $assetSource;\n        $this->logger = $logger;\n    }\n\n    \/**\n     * Process file content\n     *\n     * @param File $asset\n     * @return string\n     *\/\n    public function processContent(File $asset)\n    {\n        $path = $asset->getPath();\n        try {\n            $compiler = new Compiler();\n            $content = $this->assetSource->getContent($asset);\n\n            if (trim($content) === '') {\n                return '';\n            }\n\n            return $compiler->compile($content);\n        } catch (\\Exception $e) {\n            $errorMessage = PHP_EOL . self::ERROR_MESSAGE_PREFIX . PHP_EOL . $path . PHP_EOL . $e->getMessage();\n            $this->logger->critical($errorMessage);\n\n            return $errorMessage;\n        }\n    }\n}<\/pre>\n\n\n\n
Step 4: – <\/strong> Create a di.xml in the app\/code\/Webkul\/CssPreprocessor\/etc\/ to pass the newly created class as an argument.<\/p>\n\n\n\n
<?xml version="1.0"?>\n<!--\n\/**\n * Copyright \u00a9 2016 Magento. All rights reserved.\n * See COPYING.txt for license details.\n *\/\n-->\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager\/etc\/config.xsd">\n    <virtualType name="AlternativeSourceProcessors">\n        <arguments>\n            <argument name="alternatives" xsi:type="array">\n                <item name="scss" xsi:type="array">\n                    <item name="class" xsi:type="string">Webkul\\CssPreprocessor\\Preprocessor\\Adapter\\Scss\\Processor<\/item>\n                <\/item>\n                <item name="less" xsi:type="array">\n                    <item name="after" xsi:type="string">scss<\/item>\n                    <item name="class" xsi:type="string">Magento\\Framework\\Css\\PreProcessor\\Adapter\\Less\\Processor<\/item>\n                <\/item>\n            <\/argument>\n        <\/arguments>\n    <\/virtualType>\n<\/config><\/pre>\n\n\n\n
Step 5: – <\/strong>create a test.scss file in the app\/code\/Webkul\/CssPreprocessor\/view\/frontend\/web\/css\/<\/p>\n\n\n\n
$myColor: #009a82;\n$myString: "Test text";\n$myFontSize: 13px;\n$myMargin: 0px auto;\n$myWidth: 460px;\n\nbody{\n  background-color: $myColor;\n}\n\nh1 {\n  color: $myColor;\n  margin: 0;\n  padding: 0;\n}\n\n#container {\n  width: $myWidth;\n  margin: $myMargin;\n}<\/pre>\n\n\n\n
Step 6:- <\/strong> Run the following commands <\/p>\n\n\n\n
rm -rf pub\/static\/* \/\/If required\nphp bin\/magento setup:static-content:deploy<\/pre>\n\n\n\n
Hence once you run this command the CSS will be generated in the pub\/static\/frontend\/Magento\/your_theme\/Webkul_CssPreprocessor\/css\/test.css<\/p>\n\n\n\n
body {\n  background-color: #009a82; }\n\nh1 {\n  color: #009a82;\n  margin: 0;\n  padding: 0; }\n\n#container {\n  width: 460px;\n  margin: 0px auto; }<\/pre>\n\n\n\n
Hence In this code, we have compiled the variable declared into the regular CSS by using Leafo\/ScssPhp of SCSS. Basically, this is one example you can add any other CSS preprocessor as per your requirement to make Frontend development fast and reliable.<\/p>\n\n\n\n
The following benefits of adding CSS Preprocessor : –<\/p>\n\n\n\n
    \n
  1. Reduced the development time of the Developer by creating a global variable and using it anywhere need instead of repeating the code<\/li>\n\n\n\n
  2. Adding the nested, mixin syntax.<\/li>\n<\/ol>\n\n\n\n
    For more details, you can refer  https:\/\/developer.adobe.com\/commerce\/frontend-core\/guide\/css\/custom-preprocessor\/<\/a><\/p>\n\n\n\n
    I hope you understand the blog, Happy Coding<\/p>\n","protected":false},"excerpt":{"rendered":"
    A CSS preprocessor is\u00a0a program that lets you generate CSS from the preprocessor’s own unique syntax. The benefit of the CSS preprocessor is to avoid duplication of the code by adding global variables. Aslo, those variables can be useful anywhere if you want in CSS by converting into CSS by the compiler. In this blog, […]<\/a><\/p>\n","protected":false},"author":422,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[2460],"class_list":["post-345729","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-magento-2"],"yoast_head":"\nHow to add custom CSS Preprocessor in Magento 2 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"How to create a custom CSS Preprocessor in Magento 2 to make frontend development faster\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add custom CSS Preprocessor in Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"How to create a custom CSS Preprocessor in Magento 2 to make frontend development faster\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-27T08:44:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-05T07:06:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shreyas Vispute\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shreyas Vispute\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/\"},\"author\":{\"name\":\"Shreyas Vispute\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\"},\"headline\":\"How to add custom CSS Preprocessor in Magento 2\",\"datePublished\":\"2022-07-27T08:44:59+00:00\",\"dateModified\":\"2024-04-05T07:06:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/\"},\"wordCount\":362,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"Magento 2\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/\",\"name\":\"How to add custom CSS Preprocessor in Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2022-07-27T08:44:59+00:00\",\"dateModified\":\"2024-04-05T07:06:35+00:00\",\"description\":\"How to create a custom CSS Preprocessor in Magento 2 to make frontend development faster\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add custom CSS Preprocessor in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\",\"name\":\"Shreyas Vispute\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Shreyas Vispute\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/shreyas-vilas522\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add custom CSS Preprocessor in Magento 2 - Webkul Blog","description":"How to create a custom CSS Preprocessor in Magento 2 to make frontend development faster","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How to add custom CSS Preprocessor in Magento 2 - Webkul Blog","og_description":"How to create a custom CSS Preprocessor in Magento 2 to make frontend development faster","og_url":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-07-27T08:44:59+00:00","article_modified_time":"2024-04-05T07:06:35+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Shreyas Vispute","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Shreyas Vispute","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/"},"author":{"name":"Shreyas Vispute","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033"},"headline":"How to add custom CSS Preprocessor in Magento 2","datePublished":"2022-07-27T08:44:59+00:00","dateModified":"2024-04-05T07:06:35+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/"},"wordCount":362,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["Magento 2"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/","url":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/","name":"How to add custom CSS Preprocessor in Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2022-07-27T08:44:59+00:00","dateModified":"2024-04-05T07:06:35+00:00","description":"How to create a custom CSS Preprocessor in Magento 2 to make frontend development faster","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-css-preprocessor-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add custom CSS Preprocessor in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033","name":"Shreyas Vispute","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Shreyas Vispute"},"url":"https:\/\/webkul.com\/blog\/author\/shreyas-vilas522\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/345729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/422"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=345729"}],"version-history":[{"count":5,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/345729\/revisions"}],"predecessor-version":[{"id":431931,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/345729\/revisions\/431931"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=345729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=345729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=345729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}