Webpack 1.15.0 FeathersJS React Redux渲染DOM中没有编译或存在的Material UI样式

Question

确定为什么我的样式表似乎在我为了自己的使用而修改的程序包中被忽略的原因非常困难。不知道这是否是Material-UI或Webpack本身的问题，但是任何添加到任何.js文档头部的require或import语句在运行构建脚本时都会引发错误。 './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]; 
} 

Answer 1

只是第一眼，你需要添加-loader每个装载机。你已经做了一个，但不是其他两个：

{ 
    // When require'd, these /client/../*.inject.css files are injected into the DOM as is. 
    test: /\.inject\.css$/, 
    include: /client/, 
    loaders: [ 
     'style-loader', 
     'css-loader' 
    ] 
    }, 
    { 
    // 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/, 
    loaders: [ 
     'style-loader', 
     'css-loader' 
    ] 
    },