关于 webpack4 + less 的问题

我有一个 react 组件：

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

class App extends React.Component {
    render() {
        return <div className={style.header}>My Text</div>
    }
}

module.exports = App;

其对应的 less 文件是:

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

.header {
    color: @light-blue;
}

webpack 配置是：

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

第三方依赖的版本:

    "react": "^16.3.2",
    "react-dom": "^16.3.2"
    "css-loader": "^0.28.11",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",

可是 没有任何效果， 当我 console.log(style.header)的时候，结果是 undefined, 为什么会这样？