feat(scripts): add less support

Add built-in support for less.

See #469

Author: swashata

.gitignore

@@ -1,4 +1,5 @@
 ## Project specifics ##
+examples/tryouts
 
 # Compiled libraries
 packages/*/lib

examples/plugin/package.json

@@ -14,6 +14,7 @@
     "cssnano": "^4.1.10",
     "eslint": "^5.16.0",
     "fork-ts-checker-webpack-plugin": "^1.0.2",
+    "less": "^3.9.0",
     "node-sass": "^4.11.0",
     "prettier": "^1.17.0",
     "svgo": "^1.2.1",

examples/plugin/src/app/index.js

@@ -1,9 +1,11 @@
 /* eslint-disable no-console */
-import './index.css';
 import imgURL from './image.png';
 import logger from './modules/logger';
 import svgURL from './svg.svg';
 
+import './index.css';
+import './style.less';
+
 console.log('Heres an URL of dynamically imported asset.');
 console.log(imgURL);
 console.log(svgURL);

examples/plugin/src/app/style.less

@@ -0,0 +1,17 @@
+.entry-content {
+	background: #fff !important;
+	position: relative;
+	&::before {
+		content: "Style set by less";
+		display: block;
+		font-style: italic;
+		font-family: cursive;
+		font-weight: bold;
+		color: purple;
+		font-size: 12px;
+		position: absolute;
+		top: 44px;
+		left: -5px;
+		transform: rotate(-90deg);
+	}
+}

examples/plugin/wpackio.project.js

@@ -186,6 +186,8 @@ module.exports = {
 	hasReact: true,
 	// Needs sass?
 	hasSass: true,
+	// Needs less?
+	hasLess: true,
 	// Externals
 	externals: {
 		jquery: 'jQuery',