less

yyccQQu · Jan 29, 2019 · bd5975e · bd5975e
1 parent 4fd4104
commit bd5975e
Show file tree

Hide file tree

Showing 7 changed files with 346 additions and 11 deletions.
diff --git a/build/index.html b/build/index.html
@@ -1 +1,7 @@
-<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=X-UA-Compatible content="ie=edge"><title>Document</title></head><body><script type=text/javascript src=bundle.js?35f42786db5465f0e2d3></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=X-UA-Compatible content="ie=edge"><title>Document</title></head><style>
+    body {
+        background: pink
+    }
+</style><body>
+    <div>12345</div>
+    <script type=text/javascript src=bundle.js?35f42786db5465f0e2d3></script></body></html>
diff --git a/package.json b/package.json
@@ -10,5 +10,9 @@
         "webpack": "^4.29.0",
         "webpack-cli": "^3.2.1",
         "webpack-dev-server": "^3.1.14"
+    },
+    "dependencies": {
+        "less": "^3.9.0",
+        "less-loader": "^4.1.0"
     }
 }
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,12 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
+<style>
+    body {
+        background: pink
+    }
+</style>
 <body>
-
+    <div>12345</div>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,4 @@
 console.log(1)
 let str = require('./a.js')
 require('./index.css')
+require('./index.less')
diff --git a/src/index.less b/src/index.less
@@ -0,0 +1,5 @@
+body{
+    div{
+        border: 1px solid #fdafaf;
+    }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -38,10 +38,28 @@ module.exports = {
 				// 多个loader 需要 [],从右向左执行
 				use: [
                     // loader 变为对象之后可以多传参数
-                    { loader: "style-loader" }, 
+                    { 
+                        loader: "style-loader",
+                        options: { //将样式插入顶部，优先级为最小
+                            insertAt: 'top'
+                        }
+                    }, 
                     "css-loader"
                 ]
-			}
+            },
+            {
+                test: /.less$/,
+                use: [
+                    {
+                        loader: "style-loader",
+                        options: { 
+                            insertAt: 'top'
+                        }
+                    },
+                    "css-loader",
+                    "less-loader" //从右至左加载
+                ]
+            }
 		]
 	}
 };