Webpack 1.15.0 FeathersJS React Redux Стили пользовательского интерфейса материала, не скомпилированные или не присутствующие в визуализированной DOM

мне было чрезвычайно трудно определить, почему мои таблицы стилей, кажется, игнорируются в пакете, который я пытаюсь изменить для собственного использования. Не уверен, что это проблема с Material-UI или самим Webpack, но любые операторы require или import, которые я добавляю в заголовок любых ошибок документа .js, выдают при запуске скрипта сборки. Тот же импорт для «стиля импорта из ./style.css» работает с документами из исходного репозитория.

Лучше всего, что я могу анализировать конфигурации Webpack, которые я использую, похоже, игнорирует любые таблицы стилей, кроме тех, которые были включены в исходный пакет, И любые изменения в таблицах стилей, которые визуализируются в DOM, также игнорируются. Все, что я исследовал, указывает на то, что эта конфигурация работает и не выдает ошибок при запуске соответствующего сценария сборки.

Пожалуйста помоги! Спасибо!

webpack.production.configjs

/* eslint-env node */
/* eslint no-console: 0, no-var: 0 */

// Webpack config for PRODUCTION and DEVELOPMENT modes.
// Changes needed if used for devserver mode.

const webpack = require('webpack');
const rucksack = require('rucksack-css');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const envalid = require('envalid');
const path = require('path');

// Validate environment variables
validateEnvironmentVariables();

const config = require('config');

if (config.NODE_ENV === 'devserver') {
  throw new Error('This webpack config does not work as is with the web-dev-server.')
}

const isProduction = config.isProduction;

const outputPublicPaths = {
  production: '/dist/',
  development: '/dist/',
  devserver: 'http://localhost:8080/', // we don't use this config for webpack-dev-server
};

console.log(`----- ${config.NODE_ENV.toUpperCase()} build.`); // eslint-disable-line no-console

// Base Webpack configuration
const webpackConfig = {
  context: path.join(__dirname, 'client'),
  // re devtool: http://cheng.logdown.com/posts/2016/03/25/679045
  devtool: isProduction ? 'cheap-module-source-map' : 'source-map',
  entry: {
    main: ['./index.js'],
    // Webpack cannot produce chunks with a stable chunk hash as of June 2016,
    // stable meaning the hash value changes only when the the code itself changes.
    // See doc/FAQ.md#webpackChunks.
    // This vendor chunk will not reduce network requests, it will likely force a second request
    // each time the main chunk changes. So why separate them?
    // Chunks for code which is dynamically optionally loaded makes sense.
    // The first page will render faster as the parsing of such chunks can be delayed
    // till they are needed.
    // Of course the React routing must be changed to load such chunks as needed.
    // Maybe we'll make the routing do that at some time.
    /*
    user: [
      // './screens/Users/UserSignIn', // sign in occurs often enough to retain in main chunk
      './screens/Users/UserEmailChange',
      './screens/Users/UserForgotPwdReset',
      './screens/Users/UserForgotPwdSendEmail',
      './screens/Users/UserPasswordChange',
      './screens/Users/UserProfile',
      './screens/Users/UserProfileChange',
      './screens/Users/UserRolesChange',
      './screens/Users/UserSignIn',
      './screens/Users/UserSignInPending',
      './screens/Users/UserSignUp',
      './screens/Users/UserSignUpSendEmail',
      './screens/Users/UserSignUpValidateEmail',
    ],
    */
  },
  output: {
    filename: '[name].bundle.[chunkhash].js',

    // Tell Webpack where it should store the resulting code.
    path: path.join(__dirname, 'public', 'dist'),
    // Give Webpack the URL that points the server to output.path
    publicPath: outputPublicPaths[config.NODE_ENV],
  },
  /* This is needed for joi to work on the browser, if the client has that dependency
  node: {
    net: 'empty',
    tls: 'empty',
    dns: 'empty',
  },
  */
  module: {
    loaders: [
      {
        // File index.html is created by html-webpack-plugin. It should be a file webpack processes.
        test: /\.html$/,
        loader: 'file?name=[name].[ext]',
      },
      {
        // When require'd, these /client/../*.inject.css files are injected into the DOM as is.
        test: /\.inject\.css$/,
        include: /client/,
        loader: 'style!css',
      },
      {
        // When required, the class names in these /client/../*.css are returned as an object.
        // after being made unique. The css with the modified class names is injected into the DOM.
        test: /^(?!.*\.inject\.css).*\.css$/,
        include: /client/,
        loaders: [
          'style-loader',
          'css-loader'
        ],
      },
      {
        // Standard processing for .css outside /client
        test: /\.css$/,
        exclude: /client/,
        loader: 'style!css',
      },
        {
        test: /\.(js|jsx)$/, // does anyone still use .jsx?
        exclude: /(node_modules|bower_components)/,
        loaders: [
                /*
                'react-hot',
                */
                'babel-loader',
            ],
        },
        {
        test: /\.(svg|woff|woff2|ttf|eot)$/,
          loader: 'file?name=assets/fonts/[name].[hash].[ext]'
      },

    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    // Reroute import/require to specific files. 'react$' reroutes 'react' but not 'react/foo'.
    alias: {
    },
  },
  postcss: [
    rucksack({
      autoprefixer: true,
    }),
  ],
  plugins: [
    // Webpack's default file watcher does not work with NFS file systems on VMs,
    // definitely not with Oracle VM, and likely not with other VMs.
    // OldWatchingPlugin is a slower alternative that works everywhere.
    new webpack.OldWatchingPlugin(), // can use "webpack-dev-server --watch-poll" instead
    /*
     Build our HTML file.
     */
    // repeat new HtmlWebpackPlugin() for additional HTML files
    new HtmlWebpackPlugin({
      // Template based on https://github.com/jaketrent/html-webpack-template/blob/master/index.ejs
      template: path.join(process.cwd(), 'server', 'utils', 'index.ejs'),
      filename: 'index.html',
      inject: false, // important
      minify: {
        collapseWhitespace: true,
        conservativeCollapse: true,
        minifyCSS: true,
        minifyJS: true,
        preserveLineBreaks: true, // leave HTML readable
      },
      cache: false,
      /* We'd need this if we had a dynamically loaded user chunk
      excludeChunks: ['user'],
       */

      // Substitution values
      supportOldIE: false,
      meta: { description: config.client.appName },
      title: config.client.appName,
      faviconFile: '/favicon.ico',
      mobile: false,
      links: [],
      baseHref: null,
      unsupportedBrowserSupport: false,
      appMountId: 'root',
      appMountIds: {},
      addRobotoFont: true, // See //www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500
      copyWindowVars: {},
      scripts: ['/socket.io/socket.io.js'],
      devServer: false,
      googleAnalytics: false,
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(config.NODE_ENV) }, // used by React, etc
      __processEnvNODE_ENV__: JSON.stringify(config.NODE_ENV), // used by us
    }),
  ],
};

// Production customization

if (isProduction) {
  webpackConfig.plugins.push(
    /*
     Besides the normal benefits, this is needed to minify React, Redux and React-Router
     for production if you choose not to use their run-time versions.
     */
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      comments: false,
      sourceMap: false,
      mangle: true,
      minimize: true,
      verbose: false,
    })
  );
}

module.exports = webpackConfig;

// Validate environment variables
function validateEnvironmentVariables() {
  const strPropType = envalid.str;

  // valid NODE_ENV values.
  const nodeEnv = {
    production: 'production',
    prod: 'production',
    development: 'development',
    dev: 'development',
    devserver: 'devserver',
    testing: 'devserver',
    test: 'devserver',
  };

  const cleanEnv = envalid.cleanEnv(process.env,
    {
      NODE_ENV: strPropType({
        choices: Object.keys(nodeEnv),
        default: 'developmwent',
        desc: 'processing environment',
      }),
    }
  );

  process.env.NODE_ENV = nodeEnv[cleanEnv.NODE_ENV];
}