在React应用程序中刷新后,CSS样式消失

发布时间：2020-12-15 16:18:27 所属栏目：百科来源：网络整理

导读：在弄清楚为什么会发生这种情况时,我感到很茫然.现在我的预感是这是一个Webpack问题.我在开发环境中没有这个刷新问题,但只有在我构建并运行该代码时. 基本上,当我在某些页面上,并刷新应用程序时…我在样式表中的所有样式都被忽略,当我检查响应时,它实际上只是

在弄清楚为什么会发生这种情况时,我感到很茫然.现在我的预感是这是一个Webpack问题.我在开发环境中没有这个刷新问题,但只有在我构建并运行该代码时.

基本上,当我在某些页面上,并刷新应用程序时…我在样式表中的所有样式都被忽略,当我检查响应时,它实际上只是显示我的index.html页面.

Network Response

我将样式导入到我的应用程序的根目录中,因此在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 dev配置：

import webpack from 'webpack';
import path from 'path';

export default {
  debug: true,devtool: 'cheap-module-eval-source-map',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'
  ],devServer: {
    contentBase: './src'
  },plugins: [
    new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin()
  ],loaders: ['style','css']},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,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,500|Work+Sans:300,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>

解决方法

您正在使用HTML中CSS文件的相对路径：

<link rel="stylesheet" href="styles.css">

当您访问/ example / page /时,您尝试请求/example/page/styles.css,但由于该项不存在,您的服务器将退回到index.html.您正在使用该行为,因为您始终希望提供相同的页面,并且您的JavaScript将决定它应呈现的内容.

与您总是请求/bundle.js的方式类似,您也需要请求/styles.css,而不管实际的URL.

<link rel="stylesheet" href="/styles.css">

此问题仅出现在您的生产版本中,因为您在开发中使用了样式加载器,它将CSS注入到< style>来自JavaScript的标记.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!