Coding Environment

Coding environment with webpack, pug, scss, tailwindcss.

Support library

• .pug
• .scss
• Tailwind CSS
• Font Awesome(free)

Environment

$ node -v
v14.5.0

Setup

# Install yarn, if you did'nt install yarn
$ npm install --global yarn

# Install dependencies
$ yarn

# Start develop
$ yarn start

# Generate static site to 'dist'
$ yarn build

Setup with Docker

# Build Docker
$ docker-compose up -d --build

# Use Docker container
$ docker-compose exec app bash

# Start develop
bash-5.0# yarn start

Trouble-shooting

If you encounter any of the following errors, please switch your Node.js version to v14.

ERROR in ./src/css/base.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binding /Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/node-sass/vendor/darwin-x64-72/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 12.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 14.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
    at module.exports (/Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/node-sass/lib/binding.js:15:13)
    at Object.<anonymous> (/Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at getDefaultSassImpl (/Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/sass-loader/dist/index.js:80:29)
    at /Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/masakiyoshiiwa/Workspace/coding-webpack/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)