Webpack 1.15.0 FeathersJS React Redux styles Matériel-UI compilés ou non présents dans DOM rendu

Question

été ayant un temps extrêmement difficile de déterminer pourquoi mes feuilles de style semblent être ignorés dans un paquet que je suis en train de modifier pour mon propre usage. Je ne sais pas si c'est un problème avec Material-UI ou Webpack lui-même, mais toute instruction require ou import que j'ajoute à la tête de n'importe quel .js doc renvoie des erreurs lors de l'exécution du script de génération. Les mêmes importations pour 'import style from' ./style.css 'fonctionnent dans les documents du référentiel d'origine. Meilleur Je suis capable d'analyser les configs Webpack que j'utilise semblent ignorer toutes les feuilles de style à l'exception de celles qui ont été inclus avec le paquet d'origine ET les modifications dans les feuilles de style qui rendent le DOM sont également ignorés. Tout ce que j'ai recherché indique que cette configuration fonctionne et ne génère aucune erreur lorsque j'exécute le script de construction correspondant.

Aidez s'il vous plaît! Je vous remercie!

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

Juste au premier coup d'oeil, vous devez ajouter -loader à chaque chargeur. Vous l'avez fait pour un, mais pas pour les deux autres:

{ 
    // 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' 
    ] 
    },