关于 webpack4 + less 的问题

[ltoddy]

我有一个 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, 为什么会这样？

[ZxBing0066]

。。。学识浅薄 style.header 是个什么用法？来个文档？

[kefengong]

应该类似 styled-component 吧

[hzymyp]

css-loader 应该添加配置项 options: { importLoaders: 1 }

[yuetsh]

你这种用法是 css-module，需要配置

[ltoddy]

昨晚提完问题没到五分钟我就解决了…… options: { modules: true }

[ccbikai]

css-module