Как настроить изоморфный стиль-загрузчик с помощью webpack и реагировать?

Question

Я пытаюсь настроить webpack с помощью isomorphic-style-loader, но я продолжаю получать следующее сообщение. (Мне не нужно использовать изоморфизм, поэтому, если есть более простой способ сделать это, я бы не отказался от изменения). Мне нужна область scss-файлов.

Неудачные типы Контекст: Обязательный контекст insertCss не был указан в WithStyles(Logo). Проверьте метод рендеринга Header.

Вот мой webpack.conf.js:

var path = require('path'); 

const BROWSERS_TO_PREFIX = [ 
    'Android 2.3', 
    'Android >= 4', 
    'Chrome >= 35', 
    'Firefox >= 31', 
    'Explorer >= 9', 
    'iOS >= 7', 
    'Opera >= 12', 
    'Safari >= 7.1', 
]; 

var config = module.exports = { 
    context: path.join(__dirname,'..'), 
    entry: './app/frontend/main.js', 
    watchOptions : { 
     aggregateTimeout: 100, 
     poll: true 
    } 
}; 

config.output = { 
    path: path.join(__dirname, '..', 'app', 'assets', 'javascripts'), 
    filename: 'bundle.js', 
    publicPath: '/assets', 
    devtoolModuleFilenameTemplate: '[resourcePath]', 
    devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]' 

}; 

config.module = { 
    include: [ 
     path.resolve(__dirname, '../node_modules/react-routing/src') 
    ], 
    loaders: [{ 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: [ 
      '/node_modules/', 
      '/assets/' 
     ], 
     query: { 
      presets: ['es2015', 'stage-1', 'react'] 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loaders: [ 
      'isomorphic-style-loader', 
      'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:3]', 
      'postcss-loader?parser=postcss-scss', 
     ], 
     } 
    ] 
}; 


config.resolve = { 
    extensions: ['', '.js', '.jsx'], 
    modulesDirectory: ['../node_modules'] 
}; 

config.postcss = function plugins(bundler) { 
    return [ 
    require('postcss-import')({ addDependencyTo: bundler }), 
    require('precss')(), 
    require('autoprefixer')({ browsers: BROWSERS_TO_PREFIX }), 
    ]; 
}; 

Вот моя точка входа (main.js):

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):

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 = (
    <div className="container"> 
     <Router history={browserHistory}> 
     <Route path={"/"}> 
      <IndexRoute component={App} /> 
      <Route path={"/projects"} component={Projects} /> 
      <Route path={"/sign_in"} component={Login} /> 
     </Route> 
     </Router> 
    </div> 
); 

export default Routes; 

файл, откуда ошибка возникает (Logo.js):

Импорт ReactRouter, {withRouter, Link} из 'response-router'; import React, {Component, PropTypes} из 'response'; Импорт сStyles из 'isomorphic-style-loader/src/withStyles'; импорт из './Logo.scss';

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) 

устанавливаемых сотовый Im пытается включить (Logo.scss):

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

.root { 

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

Если я изменяю withStyles (ый) линий (логотип) шаблон делает, но без CSS. Я уверен, что проблема в том, что мне нужен метод, называемый insertCss, в контексте класса Logo, но я не знаю, каким образом его можно получить или точно, каким должен выглядеть метод thaht. Любая помощь будет оценена по достоинству.

Answer 1

Проблема была, поскольку я подозревал, что контекст не содержит метода insertCss. Что я должен был сделать, чтобы исправить это, так это обеспечить контекст с центрального места. Таким образом, я создал компонент HOC (React) для этого и использовал этот компонент в качестве моего корневого элемента.

ContextProvider (HOC):

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 <div id="context">{this.props.children}</div> 
    } 
} 
export default ContextProvider; 

Модифицированный маршрутизации:

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; 

Я надеюсь, что это поможет кому-то еще. Спросите, нужна ли вам дополнительная информация