关于reactjs：如何使用webpack配置isomorphic-style-loader并做出反应？

How to configure isomorphic-style-loader with webpack and react?

我正在尝试使用isomorphic-style-loader配置webpack，但始终收到以下消息。 (我实际上并不需要使用同构，因此，如果有更简单的方法可以做到这一点，我不会介意更改)。我需要的是scss文件的作用域。

Failed Context Types: Required context insertCss was not specified
in WithStyles(Logo). Check the render method of Header.

这是我的webpack.conf.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

这是我的入口点(main.js)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import Routes from './routes'
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

const context = {
insertCss: styles => styles._insertCss()
};

if (['complete', 'loaded', 'interactive'].includes(document.readyState) && document.body) {
ReactDOM.render(Routes, document.getElementById("main"));
} else {
document.addEventListener('DOMContentLoaded', () => {
"use strict";
ReactDOM.render(Routes, document.getElementById("main"));
}, false);
}

这是我的路线(routes.js)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import React, { Component, PropTypes } from 'react';
import App from './components/App';
import Login from './components/Login';
import Projects from './components/Projects';
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'

let Routes = (

<Router history={browserHistory}>
<Route path={"/"}>
<IndexRoute component={App} />
<Route path={"/projects"} component={Projects} />
<Route path={"/sign_in"} component={Login} />
</Route>
</Router>

);

export default Routes;

引发错误的文件(Logo.js)：

从'react-router'导入ReactRouter，{withRouter，Link};
从'react'导入React，{Component，PropTypes};
从'isomorphic-style-loader / src / withStyles'导入withStyles;
从'./Logo.scss'导入s；

1
2
3
4
5
6
7
8
9
10
11

class Logo extends Component {
render() {
return (
<Link to="/" class="image-link" id="logo-container">
<img src="/images/spotscale-logo.png" id="spotscale-logo"/>
<img src="/images/beta.png" id="beta-logo" />
</Link>
);
}
}
export default withStyles(s)(Logo)

我试图包含的CSS CSS(Logo.scss)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@import '../../globals.scss';

.root {

#beta-logo {
width: 70px;
position: relative;
top: -34px;
left: 8px;
}
#logo-container {
padding: 2em 0em;
display: inline-block;
}
}

如果我更改带有Styles(s)(Logo)的行，则呈现模板，但没有CSS。我很确定问题是我在Logo类的上下文中需要一个名为insertCss的方法，但我不知道以哪种方式到达那里，或者确切地应该是哪种方法。任何帮助，将不胜感激。

问题出在我怀疑上下文不包含insertCss方法。为了解决这个问题，我要做的就是从一个中心位置提供上下文。因此，我创建了一个HOC(React组件)来执行此操作，并将该组件用作我的根元素。

ContextProvider(HOC)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import s from '../general.scss';
class ContextProvider extends Component {

static propTypes = {
context: PropTypes.shape({
insertCss: PropTypes.func,
}),
error: PropTypes.object,
};

static childContextTypes = {
insertCss: PropTypes.func.isRequired,
};

getChildContext() {
const context = this.props.context;
return {
insertCss: context.insertCss || emptyFunction,
};
}

componentWillMount() {
const { insertCss } = this.props.context;
this.removeCss = insertCss(s);
}

componentWillUnmount() {
this.removeCss();
}

render() {
return {this.props.children}
}
}
export default ContextProvider;

修改后的路由：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import React, { Component, PropTypes } from 'react';
import ContextProvider from './components/ContextProvider'
import IndexPage from './components/IndexPage';
import LoginPage from './components/LoginPage';
import ProjectsPage from './components/ProjectsPage';
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'

const context = {
insertCss: styles => styles._insertCss(),
};

let Routes = (
<ContextProvider className="container" context={context}>
<Router history={browserHistory}>
<Route path={"/"}>
<IndexRoute component={IndexPage} />
<Route path={"/projects"} component={ProjectsPage} />
<Route path={"/sign_in"} component={LoginPage} />
</Route>
</Router>
</ContextProvider>
);

export default Routes;

我希望这可以帮助其他人。询问您是否需要更多信息