diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 6160ea0fe9d150..35c5923ebed095 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Update `esnext` (default) template to leverage CSS import in JavaScript support added to `@wordpress/scripts` ([#22727](https://github.com/WordPress/gutenberg/pull/22727/files)).
+
 ## 0.13.0 (2020-05-28)
 
 ### Internal
@@ -16,7 +20,7 @@
 
 ### Enhancements
 
-- Update `esnext` template to scaffold 3 JavaScript source files to illustrate how ES modules help to better organize code.
+- Update `esnext` (default) template to scaffold 3 JavaScript source files to illustrate how ES modules help to better organize code ([#21750](https://github.com/WordPress/gutenberg/pull/21750)).
 
 ## 0.10.0 (2020-04-01)
 
diff --git a/packages/create-block/lib/templates/esnext/$slug.php.mustache b/packages/create-block/lib/templates/esnext/$slug.php.mustache
index e5f30dfffa15a4..cc68e732494963 100644
--- a/packages/create-block/lib/templates/esnext/$slug.php.mustache
+++ b/packages/create-block/lib/templates/esnext/$slug.php.mustache
@@ -43,7 +43,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 		$script_asset['version']
 	);
 
-	$editor_css = 'editor.css';
+	$editor_css = 'build/index.css';
 	wp_register_style(
 		'{{namespace}}-{{slug}}-block-editor',
 		plugins_url( $editor_css, __FILE__ ),
@@ -51,7 +51,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 		filemtime( "$dir/$editor_css" )
 	);
 
-	$style_css = 'style.css';
+	$style_css = 'build/style.css';
 	wp_register_style(
 		'{{namespace}}-{{slug}}-block',
 		plugins_url( $style_css, __FILE__ ),
diff --git a/packages/create-block/lib/templates/esnext/src/edit.js.mustache b/packages/create-block/lib/templates/esnext/src/edit.js.mustache
index caea5d2571ee75..71eea7e1928292 100644
--- a/packages/create-block/lib/templates/esnext/src/edit.js.mustache
+++ b/packages/create-block/lib/templates/esnext/src/edit.js.mustache
@@ -5,6 +5,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
 /**
  * The edit function describes the structure of your block in the context of the
  * editor. This represents what the editor will render when the block is used.
diff --git a/packages/create-block/lib/templates/esnext/editor.css.mustache b/packages/create-block/lib/templates/esnext/src/editor.scss.mustache
similarity index 87%
rename from packages/create-block/lib/templates/esnext/editor.css.mustache
rename to packages/create-block/lib/templates/esnext/src/editor.scss.mustache
index fc68223e006607..0f0c68b4cf4885 100644
--- a/packages/create-block/lib/templates/esnext/editor.css.mustache
+++ b/packages/create-block/lib/templates/esnext/src/editor.scss.mustache
@@ -5,5 +5,5 @@
  */
 
 .wp-block-{{namespace}}-{{slug}} {
-	border: 1px dotted #f00;
+	border: 1px dotted red;
 }
diff --git a/packages/create-block/lib/templates/esnext/src/index.js.mustache b/packages/create-block/lib/templates/esnext/src/index.js.mustache
index 7cc26fbc0c9295..72fa02b82a751b 100644
--- a/packages/create-block/lib/templates/esnext/src/index.js.mustache
+++ b/packages/create-block/lib/templates/esnext/src/index.js.mustache
@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import Edit from './edit';
 import save from './save';
 
diff --git a/packages/create-block/lib/templates/esnext/style.css.mustache b/packages/create-block/lib/templates/esnext/src/style.scss.mustache
similarity index 81%
rename from packages/create-block/lib/templates/esnext/style.css.mustache
rename to packages/create-block/lib/templates/esnext/src/style.scss.mustache
index 76b12185cee079..3e1dc0a2b35043 100644
--- a/packages/create-block/lib/templates/esnext/style.css.mustache
+++ b/packages/create-block/lib/templates/esnext/src/style.scss.mustache
@@ -6,7 +6,7 @@
  */
 
 .wp-block-{{namespace}}-{{slug}} {
-	background-color: #000;
-	color: #fff;
+	background-color: theme(button);
+	color: white;
 	padding: 2px;
 }