关于 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, 为什么会这样？