在 React 应用程序中刷新后 CSS 样式消失
Posted
技术标签:
【中文标题】在 React 应用程序中刷新后 CSS 样式消失【英文标题】：CSS styles disappear after refresh in React app 【发布时间】：2017-10-01 11:11:09 【问题描述】：在弄清楚为什么会发生这种情况时，我不知所措。现在我的直觉是这是一个 Webpack 问题。我在开发环境中没有这个刷新问题，但只有当我构建和运行该代码时。
基本上，当我在某些页面上并刷新应用程序时……我在样式表中的所有样式都被忽略了，当我检查响应时，它实际上只是显示了我的 index.html 页面。
我将样式导入到我的应用程序的根目录中，因此在 index.js 中。我知道刷新时它仍在经历，因为那是我的persistedState 逻辑发生的地方，以及允许刷新工作的原因。
这是我用于生产环境的 webpack 配置。我觉得这一定是问题所在，因为开发环境很好。除非我没有考虑其他潜在问题？
import webpack from 'webpack';
import path from 'path';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
const GLOBALS =
'process.env.NODE_ENV': JSON.stringify('production')
;
export default
debug: true,
devtool: 'source-map',
noInfo: false,
entry: [
'./src/index'
],
target: 'web',
output:
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
,
devServer:
contentBase: './dist'
,
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin(GLOBALS),
new ExtractTextPlugin('styles.css'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
],
module:
loaders: [
test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel'],
test: /(\.css)$/, loader: ExtractTextPlugin.extract("css?sourceMap"),
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file',
test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000',
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream',
test: /\.(jpe?g|png|gif|svg)$/i, loader: "file",
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'
]
;
希望有人对此问题的想法或解决方案！
编辑：
这是 webpack 开发配置：
import webpack from 'webpack';
import path from 'path';
export default
debug: true,
devtool: 'cheap-module-eval-source-map',
noInfo: false,
entry: [
//'eventsource-polyfill', // necessary for hot reloading with IE
'babel-polyfill',
'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
'./src/index'
],
target: 'web',
output:
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
,
devServer:
contentBase: './src'
,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module:
loaders: [
test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel'],
test: /(\.css)$/, loaders: ['style', 'css'],
test: /\.(jpe?g|png|gif|svg)$/i, loader: "file",
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file',
test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000',
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream',
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'
]
;
HTML 的头部标签：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700|Roboto:300,400,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500|Work+Sans:300,400,500" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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" />
</head>
【问题讨论】：
你的开发 webpack 配置是什么样的？顺便说一句，这很可能是 http 服务器的问题。负责为您的应用程序文件提供服务的任何东西都会向您发送根页面 (index.html) 而不是 style.css。 @Raspo 是的！我会很快将其编辑到我的问题中......一秒钟。 @Raspo 现在好了。 我可以看到生产中的 css 使用了不同的加载器 【参考方案1】：您在 HTML 中使用 CSS 文件的相对路径：
<link rel="stylesheet" href="styles.css">
当您访问/example/page/ 时，您正在尝试请求/example/page/styles.css，但由于它不存在，您的服务器会退回到index.html。您使用这种行为是因为您总是希望提供相同的页面，而您的 javascript 将决定它应该呈现什么。
与您始终请求/bundle.js 的方式类似，您也希望请求/styles.css，而不管实际网址如何。
<link rel="stylesheet" href="/styles.css">
此问题仅出现在您的生产版本中，因为您在开发中使用 style-loader，它将 CSS 注入 JavaScript 中的 <style> 标记。
【讨论】：
嗯，这完全有道理，但我只是把它放在那里......看看它是否会改变任何东西。您还可以看到，它现在实际上已在我的 HTML 文件中被注释掉，而最初并不存在。 没有注释掉，在第3行。 我不知道第 3 行是什么原因不在我当前的 Head 标签中......我在上面的答案中告诉你 刚刚发布了它，但我会说我什至没有注意到网络响应中的第 3 行......这很有趣。 无论您用作后备的 HTML 是否都包含该行。确保您的服务器使用正确的 HTML 文件。以上是关于在 React 应用程序中刷新后 CSS 样式消失的主要内容，如果未能解决你的问题，请参考以下文章
CSS 样式在刷新后显示，然后在 Knockout 中不可见