Wie konfiguriere ich isomorphic-style-loader mit webpack und reagiere?

Question

Ich versuche, Webpack mit isomorphic-style-loader zu konfigurieren, aber ich bekomme immer die folgende Nachricht. (Ich brauche Isomorphie nicht wirklich, also wenn es einen einfacheren Weg gibt, würde ich nichts dagegen haben). Was ich brauche, ist Scoping von scss-Dateien.

fehlgeschlagen Context-Typ: Erforderlich Kontext insertCss wurde nicht in WithStyles(Logo) angegeben. Überprüfen Sie die Rendermethode von Header.

Hier ist meine 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 }), 
    ]; 
}; 

Hier mein Einstiegspunkt (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); 
} 

und hier sind meine Routen (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; 

die Datei aus, wo der Fehler ausgelöst wird (Logo.js):

ReactRouter, {withRouter, Link} von 'react-router' importieren; importieren Reagieren, {Component, PropTypes} von 'react'; Import withStyles von 'isomorphic-style-loader/src/withStyles'; importieren s von './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) 

Die CSS Im Versuch zu zählen (Logo.scss):

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

.root { 

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

Wenn ich die Linie withStyles (n) (Logo) die Vorlage ohne die CSS macht aber ändern. Ich bin mir ziemlich sicher, dass das Problem ist, dass ich eine Methode namens insertCss im Kontext der Logo-Klasse benötige, aber ich weiß nicht, auf welche Weise ich es dorthin bringen soll oder wie die Theth-Methode aussehen soll. Jede Hilfe wäre willkommen.

Answer 1

Das Problem war, als ich vermutete, dass der Kontext nicht die insertCss-Methode enthielt. Um dies zu beheben, musste ich den Kontext von einem zentralen Ort aus bereitstellen. Ich habe dafür eine HOC (React-Komponente) erstellt und diese Komponente als mein Wurzelelement verwendet.

Die context (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; 

Das modifizierte Routing:

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; 

Ich hoffe, das jemand anderes hilft. Fragen Sie, wenn Sie weitere Informationen benötigen