没有加载/服务样式表 - 反应
wma*_*ash 8 javascript reactjs webpack
我正在尝试使用React路由器进行SSR StaticRouter.
express.js (服务器)
const html = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
res.status(200).send(`
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/app.css" type="text/css"/>
</head>
<body>
<div id="app">${html}</div>
</body>
</html>
`);
提供静态文件:
app.use(express.static(path.resolve(__dirname, "../dist/client")));
App.js (共享)
import React from "react";
import { Switch, Route } from "react-router";
export default () => {
return (
<Switch>
...
</Switch>
);
};
index.jsx (客户端)
import React from "react";
import { BrowserRouter } from "react-router-dom";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById("app")
);
./styles/Main.scss
.header {
background-color: #002933;
}
我有2个webpack配置,1个用于客户端,1个用于服务器:
webpack.config.dev.js
const nodeExternals = require("webpack-node-externals");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
devtool: "cheap-module-eval-source-map",
entry: {
app: [
"eventsource-polyfill",
"webpack-hot-middleware/client",
"webpack/hot/only-dev-server",
"react-hot-loader/patch",
"./client/index.jsx",
],
vendor: [
"react",
"react-dom",
],
},
output: {
path: `${__dirname}/dist/client`,
...
},
...
module: {
loaders: [
...
}, {
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
query: {
localIdentName: "[hash:8]",
modules: true
}
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader"
}
]
}),
},
],
},
plugins: [
new ExtractTextPlugin({
filename: "[name].css",
allChunks: true
}),
]
};
webpack.config.server.js
const ExternalsPlugin = require("webpack-externals-plugin");
module.exports = {
...
output: {
path: `${__dirname}/dist/`,
filename: "server.bundle.js",
},
...
resolve: {
...
modules: [
"client",
],
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
}, {
test: /\.scss$/,
loader: 'style-loader!css-loader/locals?module&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader',
},
],
},
plugins: [
new ExternalsPlugin({
type: "commonjs",
include: `${__dirname}/node_modules/`,
}),
],
};
我有一个JSX文件,.header应该应用于:
import React from "react";
import Links from "./Links.jsx";
import profilePic from "../../img/brand/profilePic.jpg";
import styles from "../../styles/Main.scss";
export default class Header extends React.Component {
constructor() {
super();
}
render() {
return (
<header className={styles.header}>
<img src={profilePic} alt="Professional Picture"/>
<h5>{this.props.pageName}</h5>
<Links/>
</header>
);
}
}
这会引发错误:
TypeError: Cannot read property 'header' of undefined
at Header.render (E:/Documents/Projects/website/client/js/components/Header.jsx:22:30)
at resolve (E:\Documents\Projects\website\node_modules\react-dom\cjs\react-dom-server.node.development.js:2149:18)
at ReactDOMServerRenderer.render (E:\Documents\Projects\website\node_modules\react-dom\cjs\react-dom-server.node.development.js:2260:22)
at ReactDOMServerRenderer.read (E:\Documents\Projects\website\node_modules\react-dom\cjs\react-dom-server.node.development.js:2234:19)
at Object.renderToString (E:\Documents\Projects\website\node_modules\react-dom\cjs\react-dom-server.node.development.js:2501:25)
at E:/Documents/Projects/website/server/config/lib/express.js:204:31
at Layer.handle [as handle_request] (E:\Documents\Projects\website\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (E:\Documents\Projects\website\node_modules\express\lib\router\index.js:317:13)
at E:\Documents\Projects\website\node_modules\express\lib\router\index.js:284:7
at Function.process_params (E:\Documents\Projects\website\node_modules\express\lib\router\index.js:335:12)
at next (E:\Documents\Projects\website\node_modules\express\lib\router\index.js:275:10)
at p3p (E:\Documents\Projects\website\node_modules\lusca\lib\p3p.js:15:9)
at E:\Documents\Projects\website\node_modules\lusca\index.js:59:28
at xframe (E:\Documents\Projects\website\node_modules\lusca\lib\xframes.js:12:9)
at E:\Documents\Projects\website\node_modules\lusca\index.js:59:28
at xssProtection (E:\Documents\Projects\website\node_modules\lusca\lib\xssprotection.js:16:9)
运行应用程序时,的WebPack报道,样式表已经被加载:
编辑
除了ES6导入之外,我试图require()像在MERN中一样使用CommonJS ,但仍然没有看......
当我构建我的服务器webpack配置时,我现在收到错误:
ERROR in (webpack)-dev-middleware/node_modules/mime/index.js
Module not found: Error: Can't resolve './types/standard' in 'E:\Documents\Projects\website\node_modules\webpack-dev middleware\node_modules\mime'
@ (webpack)-dev-middleware/node_modules/mime/index.js 4:26-53
@ (webpack)-dev-middleware/index.js
@ ./server/config/lib/express.js
@ ./server/config/lib/app.js
@ ./server/server.js
在这种情况下我不确定这是不是红鲱鱼,但是我觉得这里值得一提,因为我很遗憾.感觉好像我抓住了吸管.
这是我的.babelrc:
{
"presets": [
"react",
"es2015",
"stage-0"
],
"plugins": [
"react-hot-loader/babel",
"transform-decorators-legacy"
],
"env": {
"server": {
"plugins": [
[
"css-modules-transform", {
"preprocessCss": "./loaders/sass-loader.js",
"generateScopedName": "[hash:8]",
"extensions": [".scss"]
}
]
]
},
"production": {
"presets": [
"es2015",
"react",
"react-optimize",
"es2015-native-modules",
"stage-0"
]
}
}
}
我试图回到基础,并让我的babel处理服务器端捆绑而不是webpack.这是使用CSS模块的SSR 教程构建的,我和@mootrichard亲切地联系在一起
编辑2
在使用样式表的es6导入时,一些可能有帮助的观察结果:
import styles from "../../styles/Main.scss";
并登录styles到控制台,它返回undefined (由于某种原因它无法找到该文件的证据).
将<link>标记放入head初始页面时,<link>标记会出现在标记中,但不会出现在网络中:
但是,在导航到时localhost:8000/app.css,会发回样式的肯定响应:
如果浏览器可以独立找到捆绑版本,那么为什么它不会在我的初始页面中加载？(路径正确)
我认为您的 css/sass 加载器的 webpack.config json 层次结构中有错误。将模块下的“loaders”数组替换为“rules”数组：
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader']
}),
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
],
},
您可以在此处查看更多 ExtractTextPlugin 用法示例： https: //github.com/webpack-contrib/extract-text-webpack-plugin#usage
| 归档时间： |
|
| 查看次数： |
897 次 |
| 最近记录： |