Javascript 反应：运行生产服务器时组件未正确呈现

我从开发了React应用程序。我安装了.css文件，将其转换为.scss，并将.js文件修改为import.scss而不是.css

当运行React-dev服务器（npm-run-dev-s）时，一切都能正常工作。然而，在构建生产资产和运行生产服务器（npm run prod-s）时，我面临一个问题：没有滑块

开发服务器：

prod server（90是滑块的默认值）：

我有三个webpack文件：webpack.common.js、webpack.client.js

webpack.common.js（根本没有css/scss加载程序！）：

webpack.client.js：

var path = require('path');
var rtlcss = require('rtlcss');
var webpack = require('webpack');
var deepmerge = require('deepmerge');
var autoprefixer = require('autoprefixer');
var blessPlugin = require('bless-webpack-plugin');
var webpackCommonConfig = require('./webpack.common');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var isProduction = process.env.NODE_ENV === 'production';

var sourceMap = false;

if (process.env.SOURCEMAP === 'true') {
  sourceMap = true;
}

var wds = {
  hostname: process.env.WP_HOST || "localhost",
  port: process.env.WP_PORT || 8079
};

var wdsPath = "http://" + wds.hostname + ":" + wds.port;
var publicPath = wdsPath + "/assets/";

var devtool = '';
var entry = {
  'app': ['./src/main.js'],
  'main': ['./sass/main.scss'],
  'main-rtl': ['./sass/main.rtl.scss'],
  'plugins': ['./src/plugins.js']
};

var plugins = [
  new webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false, __PRODUCTION__: isProduction, __DEV__: !isProduction, "process.env.NODE_ENV": '"'+process.env.NODE_ENV+'"', __DEVTOOLS__: true}),
  new webpack.IgnorePlugin(/vertx/)
];

if (process.env.EXTRACT_TEXT_PLUGIN === 'true') {
  plugins.unshift(new ExtractTextPlugin('css/[name].css'));
  plugins.unshift(blessPlugin({ imports: true, compress: true }));
}

if (isProduction) {
  plugins.unshift(new webpack.optimize.OccurrenceOrderPlugin());
  plugins.unshift(new webpack.optimize.DedupePlugin());
  plugins.unshift(new webpack.optimize.UglifyJsPlugin({
    mangle: false,
    compress: {
      unused: false,
      warnings: false
    },
    sourceMap: sourceMap
  }));
} else {
  plugins.unshift(new webpack.HotModuleReplacementPlugin());
}

function getStyleLoader(prefixer) {
  var s = '';

  if (sourceMap) s = 'sourceMap';

  if (process.env.EXTRACT_TEXT_PLUGIN === 'false') {
    return [
      'style',
      'css?-minimize&importLoaders=1&root=../public&' + s,
      'postcss-loader?pack='+prefixer+'!sass?' + s
    ];
  }

  return [
    ExtractTextPlugin.loader({
      extract: true,
      omit: 1
    }),
    'style',
    'css?-minimize&importLoaders=1&' + s,
    'postcss-loader?pack='+prefixer+'&' + s,
    'sass?' + s
  ];
}

devtool = sourceMap ? 'source-map' : '';

if (!isProduction) {
  for (var key in entry) {
    if (entry.hasOwnProperty(key)) {
      entry[key].push("webpack/hot/only-dev-server");
    }
  }

  entry.app.unshift("react-hot-loader/patch");

  entry.devServerClient = "webpack-dev-server/client?" + wdsPath;
}

var ltrloaders = getStyleLoader('normalprefixer');
var rtlloaders = getStyleLoader('rtlprefixer');

if (process.env.RTL !== 'true') {
  rtlloaders = ['null-loader'];
}

var loaders = webpackCommonConfig.module.loaders.concat();
// ltr/rtl loaders
loaders.push({ test: function(absPath) {
  if (absPath.search('rtl.scss') !== -1) {
    return true;
  }
  return false;
}, loaders: rtlloaders });
loaders.push({ test: function(absPath) {
  if (absPath.search('rtl.scss') === -1
   && absPath.search('.scss') !== -1) {
    return true;
  }
  return false;
}, loaders: ltrloaders });

// script loader for plugins.js
var pluginLoaders = ['script'];
if (isProduction) {
  pluginLoaders.push('uglify');
}
loaders.push({
  test: /(\/|\\)public(\/|\\)(.*?)\.js$/,
  loaders: pluginLoaders
});

delete webpackCommonConfig.module;

module.exports = deepmerge({
  cache: true,
  debug: true,
  devtool: devtool,
  entry: entry,
  module: {
    loaders: loaders
  },
  postcss: function() {
    return {
      normalprefixer: [ autoprefixer({ browsers: ['last 2 versions', '> 1%', 'ie 9'] }) ],
      rtlprefixer: [ autoprefixer({ browsers: ['last 2 versions', '> 1%', 'ie 9'] }), rtlcss ]
    };
  },
  devServer: {
    contentBase: wdsPath,
    publicPath: publicPath,
    hot:        true,
    inline:     false,
    lazy:       false,
    quiet:      true,
    noInfo:     true,
    headers:    { "Access-Control-Allow-Origin": "*" },
    stats:      { colors: true },
    host:       wds.hostname,
    port:       wds.port
  },
  output: {
    path: path.join(process.cwd(), 'public'),
    publicPath: isProduction ? '/' : publicPath,
    chunkFilename: 'js/[name].js',
    filename: 'js/[name].js',
  },
  plugins: plugins,
}, webpackCommonConfig);

webpack.server.js：

var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var deepmerge = require('deepmerge');
var webpackCommonConfig = require('./webpack.common');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

var sourceMapSupportModule = "require('source-map-support').install({environment: 'node'});\n\n";

var output = { path: path.join(process.cwd(), 'tmp'), filename: 'bundle.js' };

if (process.env.NO_OUTPUT_PATH) {
  output = { filename: 'server.js' };
}

var loaders = webpackCommonConfig.module.loaders.concat();
loaders.push({ test: /\.scss$/, loader: 'null' });

delete webpackCommonConfig.module;

module.exports = deepmerge({
  devtool: 'source-map',
  entry: [
    './server.babel.js'
  ],
  output: output,
  target: 'node',
  module: {
    loaders: loaders
  },
  plugins: [
    new webpack.BannerPlugin(sourceMapSupportModule, {
      raw: true,
      entryOnly: true
    }),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({__CLIENT__: false, __SERVER__: true, __PRODUCTION__: false, __DEV__: true, "process.env.NODE_ENV": '"'+process.env.NODE_ENV+'"'}),
    new webpack.IgnorePlugin(/vertx/)
  ],
  externals: nodeModules
}, webpackCommonConfig);

我刚刚进入React/JS，不知道我做错了什么

---

谢谢

很难从两个截图中分辨出来，但这似乎是一个CSS问题。为了进行调试，可以尝试将css从滑块硬编码到应用程序中。如何配置prod服务器？如果你使用webpack，它的配置文件会很有用。我有三个独立的webpack文件。我将它们添加到我的原始帖子中！不知道为什么，但我没有找到任何地方可以使用任何scss加载程序将scss转换为css。通常我们使用

var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var deepmerge = require('deepmerge');
var webpackCommonConfig = require('./webpack.common');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

var sourceMapSupportModule = "require('source-map-support').install({environment: 'node'});\n\n";

var output = { path: path.join(process.cwd(), 'tmp'), filename: 'bundle.js' };

if (process.env.NO_OUTPUT_PATH) {
  output = { filename: 'server.js' };
}

var loaders = webpackCommonConfig.module.loaders.concat();
loaders.push({ test: /\.scss$/, loader: 'null' });

delete webpackCommonConfig.module;

module.exports = deepmerge({
  devtool: 'source-map',
  entry: [
    './server.babel.js'
  ],
  output: output,
  target: 'node',
  module: {
    loaders: loaders
  },
  plugins: [
    new webpack.BannerPlugin(sourceMapSupportModule, {
      raw: true,
      entryOnly: true
    }),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({__CLIENT__: false, __SERVER__: true, __PRODUCTION__: false, __DEV__: true, "process.env.NODE_ENV": '"'+process.env.NODE_ENV+'"'}),
    new webpack.IgnorePlugin(/vertx/)
  ],
  externals: nodeModules
}, webpackCommonConfig);