我發(fā)現(xiàn)我的less文件不好使的原因是

import style from './Case.less';這個(gè)style沒有效果，請問如何才能讓這個(gè)style有效果

//import './Case.less';
import React from 'react';
import style from './Case.less';

class Case extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
        };
    }

    render() {
        return <div className={style.header}>
            頭部文件內(nèi)容
        </div>
    }
}

export default Case;

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

.header {
  color: @light-blue;
  font-size: 52px;
}

項(xiàng)目的地址

import React from 'react';
import { Link } from 'react-router';
import { Menu, Icon } from 'antd';
import style from './src/styles/home-layout.less';



const SubMenu = Menu.SubMenu;
const MenuItem = Menu.Item;

class HomeLayout extends React.Component {
    render () {
        const {children} = this.props;
        return (
            <div>
                <header className={style.header}>
                    <Link to="/">ReactManager</Link>
                </header>

                <main className={style.main}>
                    <div className={style.menu}>
                        <Menu mode="inline" theme="dark" style={{width: '240px'}}>
                            <SubMenu key="user" title={<span><Icon type="user"/><span>用戶管理</span></span>}>
                                <MenuItem key="user-list">
                                    <Link to="/user/list">用戶列表</Link>
                                </MenuItem>
                                <MenuItem key="user-add">
                                    <Link to="/user/add">添加用戶</Link>
                                </MenuItem>
                            </SubMenu>

                            <SubMenu key="book" title={<span><Icon type="book"/><span>圖書管理</span></span>}>
                                <MenuItem key="book-list">
                                    <Link to="/book/list">圖書列表</Link>
                                </MenuItem>
                                <MenuItem key="book-add">
                                    <Link to="/book/add">添加圖書</Link>
                                </MenuItem>
                            </SubMenu>
                        </Menu>
                    </div>

                    <div className={style.content}>
                        {children}
                    </div>
                </main>
            </div>
        );
    }
}

export default HomeLayout;

.main {
  height: 100vh;
  padding-top: 50px;
}

.header {
  position: absolute;
  top: 0;
  height: 50px;
  width: 100%;
  font-size: 18px;
  padding: 0 20px;
  line-height: 50px;
  background-color: #108ee9;
  color: #fff;

  a {
    color: inherit;
  }
}

.menu {
  height: 100%;
  width: 240px;
  float: left;
  background-color: #404040;
}

.content {
  height: 100%;
  padding: 12px;
  overflow: auto;
  margin-left: 240px;
  align-self: stretch;
}

{
                test: /\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }

改成這個(gè)后報(bào)錯(cuò)

{
                test: /\.css$/,
                exclude: /node_modules/,
                use:[
                    'style-loader',
                    'css-loader'
                ]

            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },