增加自定义样式

Author: chenghao

config/webpack.config.dev.js

@@ -111,6 +111,7 @@ module.exports = {
           // Webpack 2 fixes this, but for now we include this hack.
           // https://github.com/facebookincubator/create-react-app/issues/1713
           /\.(js|jsx)(\?.*)?$/,
+          /\.less$/,
           /\.css$/,
           /\.json$/,
           /\.svg$/
@@ -127,13 +128,20 @@ module.exports = {
         include: paths.appSrc,
         loader: 'babel',
         query: {
-          
+          plugins: [
+            ['import', [{ libraryName: "antd", style: true }]],
+          ],
           // This is a feature of `babel-loader` for webpack (not Babel itself).
           // It enables caching results in ./node_modules/.cache/babel-loader/
           // directory for faster rebuilds.
           cacheDirectory: true
         }
       },
+      // 解析 less 文件，并加入变量覆盖配置
+      {
+        test: /\.less$/,
+        loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#404040"}}'
+      },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.
       // "style" loader turns CSS into JS modules that inject <style> tags.

config/webpack.config.prod.js

@@ -109,6 +109,7 @@ module.exports = {
         exclude: [
           /\.html$/,
           /\.(js|jsx)$/,
+          /\.less$/,
           /\.css$/,
           /\.json$/,
           /\.svg$/
@@ -124,7 +125,11 @@ module.exports = {
         test: /\.(js|jsx)$/,
         include: paths.appSrc,
         loader: 'babel',
-        
+        query: {
+          plugins: [
+            ['import', [{ libraryName: "antd", style: true }]],
+          ]
+        }
       },
       // The notation here is somewhat confusing.
       // "postcss" loader applies autoprefixer to our CSS.
@@ -147,6 +152,14 @@ module.exports = {
         )
         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
       },
+      {
+        test: /\.less$/,
+        loader: ExtractTextPlugin.extract(
+            'css?sourceMap&!' +
+            'postcss!' +
+            'less-loader?{"sourceMap":true,"modifyVars":{"@primary-color":"#404040"}}'
+        ),
+      },
       // JSON is not enabled by default in Webpack but both Node and Browserify
       // allow it implicitly so we also enable it.
       {

package.json

@@ -2,6 +2,7 @@
   "name": "react-admin",
   "version": "0.1.0",
   "private": true,
+  "homepage": ".",
   "devDependencies": {
     "autoprefixer": "6.7.2",
     "babel-core": "6.22.1",

src/App.js

@@ -1,19 +1,70 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Layout, Menu, Breadcrumb, Icon } from 'antd';
+const { Header, Content, Footer, Sider } = Layout;
+const SubMenu = Menu.SubMenu;
+import './index.less';
 
 class App extends Component {
+  state = {
+    collapsed: false,
+    mode: 'inline',
+  };
+  onCollapse = (collapsed) => {
+    console.log(collapsed);
+    this.setState({
+      collapsed,
+      mode: collapsed ? 'vertical' : 'inline',
+    });
+  };
   render() {
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+        <Layout>
+          <Sider
+              collapsible
+              collapsed={this.state.collapsed}
+              onCollapse={this.onCollapse}
+          >
+            <div className="logo" />
+            <Menu theme="dark" mode={this.state.mode} defaultSelectedKeys={['6']}>
+              <SubMenu
+                  key="sub1"
+                  title={<span><Icon type="user" /><span className="nav-text">User</span></span>}
+              >
+                <Menu.Item key="1">Tom</Menu.Item>
+                <Menu.Item key="2">Bill</Menu.Item>
+                <Menu.Item key="3">Alex</Menu.Item>
+              </SubMenu>
+              <SubMenu
+                  key="sub2"
+                  title={<span><Icon type="team" /><span className="nav-text">Team</span></span>}
+              >
+                <Menu.Item key="4">Team 1</Menu.Item>
+                <Menu.Item key="5">Team 2</Menu.Item>
+              </SubMenu>
+              <Menu.Item key="6">
+              <span>
+                <Icon type="file" />
+                <span className="nav-text">File</span>
+              </span>
+              </Menu.Item>
+            </Menu>
+          </Sider>
+          <Layout>
+            <Header style={{ background: '#fff', padding: 0 }} />
+            <Content style={{ margin: '0 16px' }}>
+              <Breadcrumb style={{ margin: '12px 0' }}>
+                <Breadcrumb.Item>User</Breadcrumb.Item>
+                <Breadcrumb.Item>Bill</Breadcrumb.Item>
+              </Breadcrumb>
+              <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
+                Bill is a cat.
+              </div>
+            </Content>
+            <Footer style={{ textAlign: 'center' }}>
+              Ant Design ©2016 Created by Ant UED
+            </Footer>
+          </Layout>
+        </Layout>
     );
   }
 }

src/index.less

@@ -0,0 +1,24 @@
+#root{
+  height: 100%;
+}
+.ant-layout{
+  height: 100%;
+  .logo{
+    height: 32px;
+    background: #333;
+    border-radius: 6px;
+    margin: 16px;
+  }
+  .ant-layout-sider-collapsed{
+    .anticon{
+      font-size: 16px;
+      margin-left: 8px;
+    }
+    .nav-text{
+      display: none;
+    }
+    .ant-menu-submenu-vertical > .ant-menu-submenu-title:after{
+      display: none;
+    }
+  }
+}