错误：无法解析模块'style-loader'

Question

我正在使用带有 webpack 和 react 框架的 style-loader。当我在终端中运行 webpack 时，尽管我正确指定了文件路径，但我在导入.js文件中得到了Module not found: Error: Cannot resolve module 'style-loader'。

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']
        }
    }
};

Answer 1

尝试运行下面的脚本：

npm install style-loader --save

修改 webpack 配置，在 resolve 中添加modulesDirectories字段。

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

Answer 2

请运行此脚本：

 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-loader 测试 jsx，下一个测试是使用 style-loader 和 css-loader 的 css 文件，它将识别模块。另外，你应该退出npm start，运行"npm install"并运行"npm start"。希望这应该解决这个问题。

Answer 3

如果您尝试导入包含以下行的 css 文件：

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

并在您的 webpack 配置中添加了style-loader。

错误指出：

找不到模块：

错误：无法解析模块"样式加载程序"

名为"样式加载器"的模块未解析。

您需要使用以下命令安装该模块：

$ npm install style-loader --save-dev

或者，如果您使用的是纱线：

$ yarn add style-loader -D

然后再次运行webpack。

Answer 4

我想

补充一下David Guan所说的话。在较新版本的 Webpack （V2+） 中，moduleDirectories 已被替换为 modules 。他的回答的更新resolve部分如下所示：

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

有关更多信息，您可以查看他们的官方文档。希望这对那里的人有所帮助。

Answer 5

在 Webpack 3 下，由于 node_module 位于非标准位置，我必须同时使用 resolve 和resolveLoader配置对象：

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

Answer 6

我使用Windows并做了所有事情，但没有任何效果。控制台似乎没有足够的权限。因此，在以管理员模式运行后，我重新进入

npm install

一切都奏效了。您可以通过node_modules目录中显示大量模块来查看结果。

Answer 7

如果您node_modules与 webpack 配置文件位于同一目录上，您只需添加 context: __dirname 即可

。

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

（适用于 webpack 1 和 2）

Answer 8

删除'style-loader！css-loader'，让它成为['style-loader'，'css-loader']从扩展数组中删除空字符串 ''。它看起来像风箱

module:{
        rules:[
            {test:/.css$/,use:['style-loader','css-loader']},
            
        ]
    },
    
    resolve: {
        extensions: ['.js', '.jsx', '.css'],   
    },

Answer 9

你必须添加到你的依赖项

中

npm i style-loader css-loader

Answer 10

非常简单，

你必须安装第一个syle-loader和css-loader。