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'; путь импорта из 'пути'; import ExtractTextPlugin из 'extract-text-webpack-plugin';

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 для получения дополнительной информации.