Javascript 错误：无法解析模块'；样式加载器'；

我正在使用带有webpack和react框架的样式加载器。当我在终端中运行webpack时，我发现未找到模块：错误：无法解析import.js文件中的模块“样式加载器”，尽管我已正确指定了文件路径

import '../css/style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

webpack.config.js：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: [
      // Set up an ES6-ish environment
      'babel-polyfill',

      // Add your application's scripts below
      APP_DIR + '/import.js'
    ],
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',

                exclude: /node_modules/,
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'stage-0', 'react']
                }
            },
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx', '.css']
        }
    }
};

请尝试运行以下脚本：

npm安装样式加载器--保存

修改网页包配置，在

resolve

中添加

modulesDirectories

字段

    resolve: {
        extensions: ['', '.js', '.jsx', '.css'],
        modulesDirectories: [
          'node_modules'
        ]        
    }

---

请运行此脚本：

 npm install style-loader css-loader --save

将您的模块设置如下：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      include: path.join(_dirname, 'app')
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }
  ],
  resolve: {
      extensions: ['', '.js', '.jsx', '.css']
  }
}

---

它基本上是针对加载程序的——使用babel加载程序测试jsx，下一个测试是使用样式加载程序和css加载程序的css文件，这将识别模块。另外，您应该退出npm启动，运行“npm安装”和“npm启动”。希望这可以解决这个问题。

如果您尝试使用以下行导入css文件：

import '../css/style.css';

并在您的网页配置中添加了

样式加载器

错误状态为：

未找到模块：错误：无法解析模块“样式加载器”

名为“样式加载器”的模块未解析

您需要使用以下设备安装该模块：

$ npm install style-loader --save

或者，如果您使用纱线：

$ yarn add style-loader

---

然后再次运行

webpack

。

如果您的节点\u模块与您的webpack配置文件位于同一目录，您只需添加

上下文：\u dirname

module.exports = {
    context: __dirname,
    entry: [
    ...

---

（适用于网页第1和第2页）

我想补充一下所说的内容。在更新版本的Webpack（V2+）中，

模块目录

已被

模块

取代。他的答案中更新的

resolve

部分如下所示：

resolve: {
    extensions: ['.js', '.jsx', '.css'], //An empty string is no longer required.
    modules: [
      'node_modules'
    ]        
}

---

有关更多信息，您可以查看他们的网站。希望这对其他人有所帮助。

在Webpack 3下，由于

节点_模块

位于非标准位置，我必须同时使用

解析

和配置对象：

resolve: {
  modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
  modules: ["build-resource/js/node_modules"]
},

---

我使用Windows，什么都做了，但什么都没用。控制台似乎没有足够的权限。所以，在管理模式下运行后，我重新进入

npm install

---

一切顺利。您可以通过在node_modules目录中显示许多模块来查看结果。

非常简单，您必须安装First syle loader和css loader。

谢谢您的帮助，我以前安装过

npm安装样式加载器css加载器--save dev

，但由于某些原因它不起作用。你能上传你的网页配置文件吗？答案已更新，只需在

resolve

中添加

modulesDirectories

，然而，在尝试运行react with Webpack时，必须安装uri加载程序和文件加载程序模块tooThis reply帮助我官方文档链接已断开（404），谢谢！这对我来说也是固定的。我正在将webpack嵌入从其他文件夹运行的CLI中，因此它找不到我的加载程序。将模块设置为

\uuu dirname+“node\u modules”

有效--请救救德夫！最好包括安装缺失模块的基本步骤。