Question

我正在使用react-slingshot启动套件启动应用。我想从node_modules normalize.css和react-toolbox加载，但是我在构建过程中遇到了这些错误：

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 // file为传递给getConfig方法的环境生成webpack配置。从＆＃39; webpack＆＃39;中导入webpack; 导入路径＆＃39;; 从＆＃39; extract-text-webpack-plugin＆＃39;;

导入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

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

有关详细信息，请参阅this page in the webpack docs。

Webpack无法从node_modules加载包

2 个答案: