我有一个 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, 为什么会这样?
1
ZxBing0066 2018-05-16 22:52:19 +08:00 via Android
。。。学识浅薄 style.header 是个什么用法?来个文档?
|
2
kefengong 2018-05-16 23:20:35 +08:00 via Android
应该类似 styled-component 吧
|
3
hzymyp 2018-05-16 23:31:22 +08:00 via iPhone
css-loader 应该添加配置项 options: { importLoaders: 1 }
|
4
yuetsh 2018-05-17 07:30:13 +08:00
你这种用法是 css-module,需要配置
|
5
ltoddy OP 昨晚提完问题没到五分钟我就解决了…… options: { modules: true }
|
6
ccbikai 2018-05-17 08:49:41 +08:00 via iPhone
css-module
|