05 配置less@5.0.5

yangfan19 · yangfan19 · commit b5729abbff33 · 2021-03-14T18:28:15.000+08:00
diff --git a/webpack-05/package-lock.json b/webpack-05/package-lock.json
diff --git a/webpack-05/package.json b/webpack-05/package.json
@@ -16,6 +16,8 @@
     "@babel/preset-react": "^7.12.13",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.1.2",
+    "less": "^4.1.1",
+    "less-loader": "^5.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "style-loader": "^2.0.0",
diff --git a/webpack-05/src/search.js b/webpack-05/src/search.js
@@ -3,7 +3,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import './search.css';
+// import './search.css';
+import './search01.less';
 
 const Search = () => {
   return <div className='box'>我是search组件</div>;
diff --git a/webpack-05/src/search01.less b/webpack-05/src/search01.less
@@ -0,0 +1,4 @@
+.box {
+  font-size: 200px;
+  color: blue;
+}
diff --git a/webpack-05/webpack.config.js b/webpack-05/webpack.config.js
@@ -23,6 +23,10 @@ module.exports = {
         test: /.css$/, // 配置css的后缀名
         use: ['style-loader', 'css-loader'], //tips:执行的顺序是右到左的
       },
+      {
+        test: /.less$/, // 配置less的后缀名
+        use: ['style-loader', 'css-loader', 'less-loader'], //tips:执行的顺序是右到左的
+      },
     ],
   },
 };

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +.box {
 +  font-size: 200px;
 +  color: blue;
 +}