[Feature] Added feature to allow users to select preferred styling lang

CREATE-PLAY.md

@@ -48,6 +48,11 @@ Welcome developers! We are as excited as you are to know that you are going to c
             <td>Yes</td>
             <td>Let the application know your choice of script. It supports both <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it.</td>
           </tr>
+          <tr>
+            <td>Style to be used (css/scss)</td>
+            <td>Yes</td>
+            <td>Let the application know your choice of style. It supports both <b>css</b> and <b>scss</b>. You can pick either of it.</td>
+          </tr>
           <tr>
             <td>What is the level of this play?</td>
             <td>Yes</td>

plop-templates/component_js.hbs

@@ -1,6 +1,7 @@
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
+import './{{camelCase name}}.{{style}}';
 
 function {{pascalCase name}}(props) {
   // Do not remove the below lines. 

plop-templates/component_ts.hbs

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
+import './{{camelCase name}}.{{style}}';
 
 function {{pascalCase name}}(props:any) {
   // Do not remove the below lines. 

plop-templates/style_css.hbs

@@ -0,0 +1 @@
+/* enter stlyes here */

plop-templates/style_scss.hbs

@@ -0,0 +1 @@
+/* enter stlyes here */

plopfile.js

@@ -33,6 +33,12 @@ module.exports = plop => {
         message: 'Language to be used (javascript/typescript):',
         choices: ['js', 'ts']
       },
+      {
+        type: 'list',
+        name: 'style',
+        message: 'Style to be used (css/scss):',
+        choices: ['css', 'scss']
+      },
       {
         type: 'list',
         name: 'level',
@@ -71,6 +77,11 @@ module.exports = plop => {
         path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.{{language}}x',
         templateFile: 'plop-templates/component_{{language}}.hbs',
       },
+      {
+        type: 'add',
+        path: 'src/plays/{{generateFolderName name}}/{{camelCase name}}.{{style}}',
+        templateFile: 'plop-templates/style_{{style}}.hbs',
+      },
       {
         type: 'add',
         path: 'src/plays/{{generateFolderName name}}/Readme.md',