我在反应中使用服务器端渲染
正如此SSR样板中的建议，
https://github.com/erikras/react-redux-universal-hot-example
webpack.config.js：这是加载器部分看起来的样子 -
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.pcss$/, loader: 'style-loader!css-loader!postcss-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader'},
{ test: /\.less$/, loader: 'style!css?importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
{ test: /\.scss$/, loader:
'style!css?importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
webpack-isomorphic-tools.js样式模块部分：
style_modules: {
extensions: ['less','scss','css'],
filter: function(module, regex, options, log) {
if (options.development) {
// in development mode there's webpack "style-loader",
// so the module.name is not equal to module.name
return WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log);
} else {
// in production mode there's no webpack "style-loader",
// so the module.name will be equal to the asset path
return regex.test(module.name);
}
},
在我的组件中，render方法如下所示：
require('../../../styles/header_new.css');
require('../../../styles/common_style.scss');
render() {
return (
<div className="some_class_from_commonstyleSCSS">
</div>
)
我似乎已经遵循了所有步骤，但根本没有应用CSS。
我可以就此提出一些建议吗？
编辑：scss文件的快照：
@import "partial/header";
@import "partial/variables";
@import "partial/mixins";
@import "partial/login_signup";
@import "partial/footer";
@import "partial/sbl_popups";
@import "partial/track_order";
//@import "~font-awesome/scss/font-awesome";
body, html{
font-size: $primary_font;
font-family: $font_regular;
height:100%;
margin: 0px;
padding: 0px;
color: $primary_color;
min-height:100%;
}
.mg_img1, .mg_img2, .mg_img3, .mg_img4, .mg_img5, .mobile_maga_img, .phone_sprite, .email_sprite, .add_sprite, .visaimg, .payment_icon, .swiper-button-magazine-next, .swiper-button-magazine-prev, .android_image, .ios_image {
max-width: 100%;
background-size: 100%;
background-image: url(../images/commonsprite.png);
//background-image: url(http://localhost:3000/src/images/commonsprite.png);
}
header_new.css
.hide-true {
display: none;
}
.login-true{
display: none;
}
.login-false{
display: block;
}
.disabled {
opacity: 0.65;
cursor: not-allowed;
}
这些在客户端渲染和ES6导入语句中运行良好。
这是我用来呈现HTML的函数：
function renderFullPage(html, preloadedState, assets = webpackIsomorphicTools.assets()) {
console.log('ASSETSSSSSSSSSSSSSSS STYLESSS', assets.styles);
console.log(assets)
//console.log("ASSETTTTTTTTSSSSSSSSSSSSSSSSSSSSSSSSSSS ARE AS FOLLOWSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS", assets);
//console.log("html to be inserted", html);
//console.log("preloaded state in render full page", preloadedState);
return `
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
${Object.keys(assets.styles).map((style, i) =>
<link href={assets.styles[style]} key={i}
rel="stylesheet" type="text/css"/>)
}
</head>
<body>
<div id="app">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
</script>
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-KMXH6S"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=false;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KMXH6S');
</script>
<div className="nanorep_loadingData" id="nanoRepProxyContainer" aria-live="polite" style={{position:'absolute', top: '-500px', left: 0}} />
</body>
</html>
`
{/*<script src="/static/dist/bundle.js"></script>*/}
}