如何使用webpack配置同構樣式加載器並作出反應？

我想用同構樣式加載器配置webpack，但我不斷收到以下消息。（我並不需要使用同構，所以如果有更簡單的方法來做到這一點，我不會介意改變）。我需要的是scss文件的範圍。如何使用webpack配置同構樣式加載器並作出反應？

失敗的上下文類型：必需的背景下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）文件：

從'react-router'導入ReactRouter，{withRouter，Link}; 從'react'導入React，{Component，PropTypes}; 從'isomorphic-style-loader/src/withStyles'導入樣式;從'./Logo.scss'導入s; ;

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我試着去包括（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（S）（標誌）的模板，但沒有呈現的CSS。林相當肯定的問題是，我需要在Logo類的上下文中稱爲insertCss的方法，但我不知道以什麼方式得到它或確切的方法應該看起來像什麼。任何幫助，將不勝感激。

來源

2016-09-09 Pablo Jomer

問題是因爲我懷疑上下文不包含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;

我希望這可以幫助別人。詢問您是否需要更多信息

來源

2016-09-09 07:51:35

如何使用webpack配置同構樣式加載器並作出反應？

回答

相關問題