我正在古腾堡编辑器中使用此tutorial.

NOTE:- ALL THE CODE I HAVE WRITTEN IS INSIDE THE THEME NOT AS A PLUGIN

这是我的代码：-

function.php

function gutenberg_boilerplate_block() {
    wp_register_script( \'gutenberg-ccard\', get_template_directory_uri().\'/inc/blocks/block.jsx\', array( \'wp-blocks\', \'wp-element\', \'wp-editor\' ) );
    register_block_type( \'card-block/main\', array( \'editor_script\' => \'gutenberg-ccard\', ) );

}
add_action( \'init\', \'gutenberg_boilerplate_block\' );

block.js

const { RichText, MediaUpload, PlainText } = wp.editor;
const { registerBlockType } = wp.blocks;
const { Button } = wp.components;
const getImageButton = (openEvent) => {
  if(attributes.imageUrl) {
    return (
      \'<img \'+
          \'src={ attributes.imageUrl }\'+
          \'onClick={ openEvent }\'+
          \'className="image"\'+
        \'/>\'
    );
  }
  else {
    return (
      \'<div className="button-container">\'+
              \'<Button \'+
                \'onClick={ openEvent }\'+
                \'className="button button-large"\'+
              \'>\'+
                \'Pick an image\'+
              \'</Button>\'+
            \'</div>\'
    );
  }
};



registerBlockType(\'card-block/main\', {
    title: \'Card\',
    icon: \'heart\',
    category: \'common\',
    attributes: {
        title: {
            source: \'text\',
            selector: \'.card__title\'
        },
        body: {
            type: \'array\',
            source: \'children\',
            selector: \'.card__body\'
        },
        imageAlt: {
            attribute: \'alt\',
            selector: \'.card__image\'
        },
        imageUrl: {
            attribute: \'src\',
            selector: \'.card__image\'
        }
    },
    edit({ attributes, className, setAttributes }) {
      return (

        \'<div className="container">\'+
          \'<MediaUpload\'+
            \'onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }\'+
            \'type="image"\'+
            \'value={ attributes.imageID }\'+
            \'render={ ({ open }) => getImageButton(open) }\'+
          \'/>\'+
          \'<PlainText\'+
            \'onChange={ content => setAttributes({ title: content }) }\'+
            \'value={ attributes.title }\'+
            \'placeholder="Your card title"\'+
            \'className="heading"\'+
          \'/>\'+
          \'<RichText\'+
            \'onChange={ content => setAttributes({ body: content }) }\'+
            \'value={ attributes.body }\'+
            \'multiline="p"\'+
            \'placeholder="Your card text"\'+
          \'/>\'+
        \'</div>\'

      );
    },


    save({ attributes }) {

      const cardImage = (src, alt) => {
        if(!src) return null;

        if(alt) {
          return (
            \'<img \'+
              \'className="card__image" \'+
              \'src={ src }\'+
              \'alt={ alt }\'+
            \'/> \'
          );
        }

        // No alt set, so let\'s hide it from screen readers
        return (
          \'<img \'+
            \'className="card__image" \'+
            \'src={ src }\'+
            \'alt=""\'+
            \'aria-hidden="true"\'+
          \'/> \'
        );
      };

      return (
        \'<div className="card">\'+
          \'{ cardImage(attributes.imageUrl, attributes.imageAlt) }\'+
          \'<div className="card__content">\'+
            \'<h3 className="card__title">{ attributes.title }</h3>\'+
            \'<div className="card__body">\'+
              \'{ attributes.body }\'+
            \'</div>\'+
         \' </div>\'+
        \'</div>\'
      );
    }
});

So what\'s the problem.

每当我尝试导入我的scss文件时，都会触发错误

未捕获语法错误：意外字符串

这是截图

有什么问题吗。我做错了什么，为什么会这样？