isomorphic-style-loaderでwebpackを設定しようとしていますが、次のメッセージが表示され続けます。 (私は実際に同型写像を使う必要はないので、これを行うより簡単な方法があれば、私は気にしません)。私が必要とするのはscssファイルのスコープです。webpackでisomorphic-style-loaderを構成して反応するには?
失敗したコンテキストタイプ:必要なコンテキスト
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):
インポート 'ReactionRouter、{withRouter、Link}'から 'react-router'; インポート、{Component、PropTypes}から 'react'を返します。'isomorphic-style-loader/src/withStyles'から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)
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なしではなくレンダリングします。私はロゴクラスのコンテキストでinsertCssというメソッドを必要としているが、どのような方法でそれを取得するのか正確にどのようなメソッドを使用するのかはわかりません。どんな助けもありがとう。