update demo

tompascall · tompascall · commit 8dd8af27253d · 2017-04-03T22:02:16.000+02:00
diff --git a/demo/dims.js b/demo/dims.js
@@ -0,0 +1,5 @@
+module.exports = {
+    small: '50px',
+    middle: '100px',
+    large: '200px'
+};
diff --git a/demo/index.html b/demo/index.html
@@ -5,7 +5,7 @@
     </head>
     <body>
         <div id="selected-squares-container"></div>
-        <span style="font-family: monospace; font-size: small">Choose color:</span>
+        <span class="choose">Choose color:</span>
         <select name="colors"></select>
         <button id="add-square-button">Add square</button>
 
diff --git a/demo/index.js b/demo/index.js
@@ -1,4 +1,5 @@
 import './style.scss';
+import './style.less';
 import colors from './colors';
 
 const select = document.querySelector('select');
diff --git a/demo/package.json b/demo/package.json
@@ -17,6 +17,8 @@
     "babel-preset-env": "^1.3.2",
     "css-loader": "^0.28.0",
     "js-to-sass-var-loader": "^1.0.0",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.3",
     "node-sass": "^4.5.2",
     "sass-loader": "^6.0.3",
     "style-loader": "^0.16.1",
diff --git a/demo/style.less b/demo/style.less
@@ -0,0 +1,11 @@
+require('./dims.js');
+
+.square {
+  width: @middle;
+  height: @middle;
+}
+
+.choose {
+    font-family: monospace;
+    font-size: small;
+}
diff --git a/demo/style.scss b/demo/style.scss
@@ -1,8 +1,6 @@
 require('./colors.js');
 
 .square {
-  width: 100px;
-  height: 100px;
   display: inline-block;
 }
 
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -5,7 +5,6 @@ module.exports = {
     entry: './index.js',
     output: {
       filename: 'bundle.js',
-        //path: path.resolve(__dirname)
     },
     module: {
         rules: [
@@ -22,6 +21,19 @@ module.exports = {
                 {
                     loader: "../index.js"
                 }]
+            },
+            {
+                test: /\.less$/,
+                use: [{
+                    loader: "style-loader"
+                }, {
+                    loader: "css-loader"
+                }, {
+                    loader: "less-loader"
+                },
+                {
+                    loader: "../index.js"
+                }]
             }
         ]
     },

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import './style.scss';`
	`2`	`+import './style.less';`
`2`	`3`	`import colors from './colors';`
`3`	`4`
`4`	`5`	`const select = document.querySelector('select');`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,6 @@`
`1`	`1`	`require('./colors.js');`
`2`	`2`
`3`	`3`	`.square {`
`4`		`- width: 100px;`
`5`		`- height: 100px;`
`6`	`4`	`display: inline-block;`
`7`	`5`	`}`
`8`	`6`