Webpack 1.15.0 FeathersJS React ReduxマテリアルUIスタイルがレンダリングされたDOMにコンパイルされていないか存在しない

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を追加する必要があります。あなたは1のためにそれを行って、ではなく、他の二つました：

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