Webpack无法从node_modules加载软件包

Question

我开始使用react-slingshot启动工具包。我想从node_modules normalize.css加载和响应，工具箱，但在生成过程中我得到这些错误：

ERROR in ./~/normalize.css/normalize.css 
Module parse failed: /home/jules/projects/tourbnb-frontend/node_modules/normalize.css/normalize.css Line 9: Unexpected token { 
You may need an appropriate loader to handle this file type. 
| */ 
| 
| html { 
| font-family: sans-serif; /* 1 */ 
| -ms-text-size-adjust: 100%; /* 2 */ 
@ ./src/index.js 29:0-24 

ERROR in ./~/react-toolbox/lib/app/App.js 
Module not found: Error: Cannot resolve 'file' or 'directory' ./style in /home/jules/projects/tourbnb-frontend/node_modules/react-toolbox/lib/app 
@ ./~/react-toolbox/lib/app/App.js 11:13-31 

这是我的index.js：

import React from 'react'; 
import {render} from 'react-dom'; 
import { Provider } from 'react-redux'; 
import ToolboxApp from 'react-toolbox/lib/app'; 
import App from './containers/App'; 
import configureStore from './store/configureStore'; 
import './styles/styles.scss'; //Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page. 
import 'normalize.css'; 

const store = configureStore(); 

render(
    <Provider store={store}> 
    <ToolboxApp> 
     <App /> 
    </ToolboxApp> 
    </Provider>, document.getElementById('app') 
); 

这是我的WebPack。 config.js //有关此文件的信息，请参阅webpack和webpack-hot-middleware文档 //为每个环境编写webpack.config.js，而这个 //文件会为环境生成webpack配置传递给getConfig方法。从'webpack'导入webpack的 ; 从'path'导入路径; 从'extract-text-webpack-plugin'中导入ExtractTextPlugin;

const developmentEnvironment = 'development' ; 
const productionEnvironment = 'production'; 
const testEnvironment = 'test'; 

const getPlugins = function (env) { 
    const GLOBALS = { 
    'process.env.NODE_ENV': JSON.stringify(env), 
    __DEV__: env === developmentEnvironment 
    }; 

    const plugins = [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.DefinePlugin(GLOBALS) //Tells React to build in prod mode. https://facebook.github.io/react/downloads.html 
    ]; 

    switch (env) { 
    case productionEnvironment: 
     plugins.push(new ExtractTextPlugin('styles.css')); 
     plugins.push(new webpack.optimize.DedupePlugin()); 
     plugins.push(new webpack.optimize.UglifyJsPlugin()); 
     break; 

    case developmentEnvironment: 
     plugins.push(new webpack.HotModuleReplacementPlugin()); 
     plugins.push(new webpack.NoErrorsPlugin()); 
     break; 
    } 

    return plugins; 
}; 

const getEntry = function (env) { 
    const entry = []; 

    if (env === developmentEnvironment) { // only want hot reloading when in dev. 
    entry.push('webpack-hot-middleware/client'); 
    } 

    entry.push('./src/index'); 

    return entry; 
}; 

const getLoaders = function (env) { 
    const loaders = [{ test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel', 'eslint'] }]; 

    if (env === productionEnvironment) { 
    // generate separate physical stylesheet for production build using ExtractTextPlugin. This provides separate caching and avoids a flash of unstyled content on load. 
    loaders.push({ 
     test: /(\.css|\.scss)$/, 
     include: path.join(__dirname, 'src'), 
     loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap") 
    }); 
    } else { 
    loaders.push({ 
     test: /(\.css|\.scss)$/, 
     include: path.join(__dirname, 'src'), 
     loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
    }); 
    } 

    return loaders; 
}; 

function getConfig(env) { 
    return { 
    debug: true, 
    devtool: env === productionEnvironment ? 'source-map' : 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool 
    noInfo: true, // set to false to see a list of every file being bundled. 
    entry: getEntry(env), 
    target: env === testEnvironment ? 'node' : 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test 
    output: { 
     path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`. 
     publicPath: '', 
     filename: 'bundle.js' 
    }, 
    plugins: getPlugins(env), 
    module: { 
     loaders: getLoaders(env) 
    } 
    }; 
} 

export default getConfig; 

可能是什么问题？谢谢。

Answer 1

问题是包含在加载程序中排除了node_modules。我只是省略了包括，它很好：

loaders.push({ 
    test: /(\.css|\.scss)$/, 
    loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
}); 

Answer 2

嗯，也许你必须将.css添加到您在webpack配置中解析的扩展。像这样的东西可能是：
resolve: { extensions: ['', '.js', '.css'] }

有关更多信息，请参阅this page in the webpack docs。