Add sass loader

.vscode/settings.json

@@ -1,4 +1,15 @@
 {
   "files.eol": "\n",
-  "git.fetchOnPull": true
+  "git.fetchOnPull": true,
+  "eslint.run": "onSave",
+  "eslint.workingDirectories": [
+    {
+      "directory": "lib",
+      "changeProcessCWD": true
+    },
+    {
+      "directory": "example",
+      "changeProcessCWD": true
+    }
+  ]
 }

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- first party support for `sass` ([#41](https://github.com/JBKLabs/react-dev/issues/41))
+
 ## [0.5.0] - 2020-05-01
 
 ### Updated

example/package.json

@@ -5,7 +5,7 @@
   "main": "src/index.js",
   "scripts": {
     "start": "jbk-scripts start",
-    "lint": "jbk-scripts lint src/**",
+    "lint": "jbk-scripts lint 'src/**'",
     "build": "jbk-scripts build",
     "configure": "jbk-scripts configure",
     "eject": "jbk-scripts eject"
@@ -26,5 +26,10 @@
     "react-router-dom": "5.0.1",
     "styled-components": "4.3.2",
     "uuid": "3.3.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "@jbknowledge"
+    ]
   }
 }

example/src/index.js

@@ -6,6 +6,7 @@ import '@babel/polyfill';
 
 import store from './lib/store';
 import App from './App';
+import './styles/index.scss';
 
 ReactDOM.render(
   <Provider store={store}>

example/src/styles/index.scss

@@ -0,0 +1,8 @@
+$text-color: #444;
+$background: #eee;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  color: $text-color;
+  background-color: $background;
+}

lib/package.json

@@ -12,8 +12,8 @@
     "npm": ">= 5"
   },
   "scripts": {
-    "lint": "node src/scripts lint **/*.js",
-    "prepublish": "copyfiles ../CHANGELOG.md ../README.md ../LICENSE ./lib",
+    "lint": "node src/scripts lint '**/*.js'",
+    "prepublishOnly": "copyfiles ../CHANGELOG.md ../README.md ../LICENSE ./lib",
     "postpublish": "rimraf CHANGELOG.md README.md LICENSE"
   },
   "main": "index.js",
@@ -51,9 +51,11 @@
     "escape-string-regexp": "2.0.0",
     "html-webpack-plugin": "4.0.0-beta.5",
     "inquirer": "7.0.0",
+    "node-sass": "4.13.0",
     "prettier": "1.18.2",
     "read-pkg-up": "6.0.0",
     "rimraf": "3.0.0",
+    "sass-loader": "8.0.0",
     "shelljs": "0.8.3",
     "style-loader": "0.23.1",
     "webpack": "4.35.2",

lib/src/config/.eslintignore

@@ -1,2 +1,5 @@
 node_modules
-dist
+dist
+*.css
+*.scss
+*.sass

lib/src/config/webpack.config.js

@@ -56,6 +56,14 @@ module.exports = {
       {
         test: /\.css$/,
         use: [require.resolve('style-loader'), require.resolve('css-loader')]
+      },
+      {
+        test: /\.s[ac]ss$/,
+        use: [
+          require.resolve('style-loader'),
+          require.resolve('css-loader'),
+          require.resolve('sass-loader')
+        ]
       }
     ]
   },

lib/src/scripts/configure.js

@@ -26,9 +26,8 @@ iterateUserEnvironment((key, value) => {
   if (!envRegex.test(env)) {
     log.debug(`${key} not found in env.js`);
     return;
-  } else {
-    log.debug(`Replacing key: ${key}`);
   }
+  log.debug(`Replacing key: ${key}`);
 
   shell.sed('-i', envRegex, `${key}: '${value}'`, envPath);
 });

lib/src/util/elevate.js

@@ -11,6 +11,7 @@ const configPath = path.join(
 const appPath = appDirectory;
 
 const elevate = async (files) => {
+  /* eslint-disable-next-line no-unused-vars */
   for (const file of files) {
     const srcPath = path.join(configPath, file);
     const destPath = path.join(appPath, file);

package.json

@@ -8,5 +8,8 @@
     "nohoist": [
       "**"
     ]
+  },
+  "scripts": {
+    "lint": "yarn workspaces run lint"
   }
 }