'feact开启cssmudule'

horizon188 · Sep 21, 2020 · 46cb459 · 46cb459
1 parent 91cd1a8
commit 46cb459
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 40 deletions.
diff --git a/app.less b/app.less
@@ -1,12 +1,18 @@
-.mgb24 {
-  margin-bottom: 24px;
-}
-.mgl24 {
-  margin-left: 24px;
-}
-.mgt24 {
-  margin-top: 24px;
-}
-.mgr24 {
-  margin-right: 24px;
+:global {
+  .mgb24 {
+    margin-bottom: 24px;
+  }
+  .mgl24 {
+    margin-left: 24px;
+  }
+  .mgt24 {
+    margin-top: 24px;
+  }
+  .mgr24 {
+    margin-right: 24px;
+  }
 }
+
+// .app {
+//   background-color: red;
+// }
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
       rel="stylesheet"
       href="http://at.alicdn.com/t/font_1301128_tpx3lujm55.js"
     /> -->
-    <!-- <script
+    <script
       type="text/javascript"
       src="http://at.alicdn.com/t/font_1056478_rbb39ljr7lf.js"
     ></script>
@@ -60,22 +60,9 @@
     <script
       type="text/javascript"
       src="http://at.alicdn.com/t/font_872265_oftixmwgy8b.js"
-    ></script> -->
+    ></script>
   </head>
   <body style="background-color: #f5f5f5">
-    <!-- <svg class="icon" aria-hidden="true">
-      <use xlink:href="#icon-canting1"></use>
-    </svg>
-    <svg class="icon" aria-hidden="true">
-      <use xlink:href="#icon-canting3"></use>
-    </svg>
-    <svg class="icon" aria-hidden="true">
-      <use xlink:href="#icon-tingchechang3"></use>
-    </svg>
-    <svg class="icon" aria-hidden="true">
-      <use xlink:href="#icon-weishengjian1"></use>
-    </svg> -->
-
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/component/Grid/GridView.js b/src/component/Grid/GridView.js
@@ -1,8 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
-import "./GridLess.less";
 import { Table, Button, Menu, Dropdown } from "antd";
 import { DownOutlined } from "@ant-design/icons";
+import styles from "./GridLess.less";
+
 //分页配置
 const pageConfig = {
   pageSizeOptions: ["10", "20", "30", "40"],
@@ -94,9 +95,9 @@ class TableComponent extends React.Component {
       }
     };
     return (
-      <div className={"tableComponet"}>
+      <div className={styles["tableComponet"]}>
         {/* 表格前的节点 */}
-        <div className={"beforeNode"}>
+        <div className={styles["beforeNode"]}>
           {batchBtns &&
             batchBtns.map((item, index) => {
               return beforeInfo(item, index);

diff --git a/src/component/Query/QueryView.js b/src/component/Query/QueryView.js
@@ -1,9 +1,10 @@
 import React from "react";
 import { connect } from "react-redux";
-import "./QueryLess.less";
+// import "./QueryLess.less";
 import { Form, InputNumber, Button, Input, Row, Select } from "antd";
 import { get } from "lodash";
-
+import styles from "./QueryLess.less";
+console.log("styles", styles);
 class QueryComponet extends React.Component {
   constructor(props) {
     super(props);
@@ -165,9 +166,9 @@ class QueryComponet extends React.Component {
         break;
     }
     return (
-      <div className="queryItem" key={en_name}>
-        <div className="queryLabel">{zh_name}</div>
-        <div className="queryContent">{content}</div>
+      <div className={styles["queryItem"]} key={en_name}>
+        <div className={styles["queryLabel"]}>{zh_name}</div>
+        <div className={styles["queryContent"]}>{content}</div>
         {queryConfig && queryConfig.length === index + 1 && (
           <div style={{ display: "flex" }}>
             <Button type="primary" className="mgr24 mgl24" htmlType="submit">
@@ -184,9 +185,13 @@ class QueryComponet extends React.Component {
     //渲染表单项
     let { queryConfig } = this.props;
     return (
-      <div className={"query"} id={this.id}>
-        <Form layout={"inline"} onFinish={this.onFinish} ref={this.formRef}>
-          <div className={"queryForm"}>
+      <div className={styles["query"]} id={this.id}>
+        <Form
+          layout={styles["inline"]}
+          onFinish={this.onFinish}
+          ref={this.formRef}
+        >
+          <div className={styles["queryForm"]}>
             {queryConfig &&
               queryConfig.map((item, index) => {
                 return this.renderFields(item, index);

diff --git a/src/views/App.js b/src/views/App.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import "./App.less";
+import styles from "./App.less";
 import { Tag, Space, Modal, Form, Input, Button } from "antd";
 import { Grid, Query } from "component";
 import ModalConponet from "./modal";
@@ -206,7 +206,7 @@ class App extends React.Component {
       onChange: this.onSelectInfoChange,
     };
     return (
-      <div className={"app"}>
+      <div className={styles["app"]}>
         <div className="mgb24">
           <Query
             queryConfig={this.queryConfig}

diff --git a/webpack.config.js b/webpack.config.js
@@ -79,12 +79,15 @@ new HappyPack({
             // },
             {
               loader: "css-loader",
+              options: {
+                modules: true,
+                // localIdentName: "[path][name]__[local]--[hash:base64:5]",
+              },
             },
             {
               loader: "less-loader",
             },
           ],
-          // include: path.resolve(__dirname, 'node_modules'),
         },
         {
           test: /\.(png|jpg|gif|md)$/,