diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index 43b19157c36567..acbbe44a7f8a60 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -113,6 +113,10 @@ <h1>CSS</h1>
     test for import less in less, this color will be blue
   </div>
 
+  <div class="css-in-scss">
+    test import css in scss, this color will be orange
+  </div>
+
   <pre class="inlined-code"></pre>
 </div>
 
diff --git a/packages/playground/css/nested/_index.scss b/packages/playground/css/nested/_index.scss
index 6f2103c79fc2c8..48d630b573ae1b 100644
--- a/packages/playground/css/nested/_index.scss
+++ b/packages/playground/css/nested/_index.scss
@@ -1,3 +1,5 @@
+@import './css-in-scss.css';
+
 .sass-at-import {
   color: olive;
   background: url(./icon.png) 10px no-repeat;
diff --git a/packages/playground/css/nested/css-in-scss.css b/packages/playground/css/nested/css-in-scss.css
new file mode 100644
index 00000000000000..a63e49e4d6a1fd
--- /dev/null
+++ b/packages/playground/css/nested/css-in-scss.css
@@ -0,0 +1,3 @@
+.css-in-scss {
+  color: orange;
+}