关于webpack4 + less的问题

#1

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

#2

额. 你期望它是什么样…

#3

你看，我已經写了less了。但是我实际页面的文字并没有颜色，而是默认的黑色。

#4

在 DOM 里面查找一下, 有没有 <style> 被正确地注入到 <head> 里面.

#5

当你说这话的时候，我就知道你不懂这个。

#6

应该是webpack配置错了

#7

没开启css mudule

{
      loader: 'css-loader',
      options: {
        modules: true
      }
}
1 Like
#8

pretty good

#9

跟less没关系，css-module的问题