错误:无法解析模块“样式加载器”


78

我正在将样式加载器与webpack和react框架一起使用。当我在终端中运行webpack时,Module not found: Error: Cannot resolve module 'style-loader'尽管我已经正确指定了文件路径,但我仍然要导入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']
        }
    }
};

Answers:


88

尝试在下面运行脚本:

npm install style-loader --save

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

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

2
感谢您的工作,我以前安装过,npm install style-loader css-loader --save-dev但是由于某种原因它没有工作。
Rahul Dagli '16

您可以上传您的webpack配置文件吗?
David Guan

1
答更新,只需要加modulesDirectories resolve
David Guan

为我工作,但是也必须安装uri-loader和file-loader模块
rluks

这个回答可以帮助我,当试图运行具有的WebPack反应
法里斯Rayhan的

24

请运行以下脚本:

 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”。希望这应该解决这个问题。


12

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

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

并将其添加到style-loader您的webpack配置中。

错误状态:

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

无法解析名为“ style-loader”的模块

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

$ npm install style-loader --save

或者,如果您使用的是毛线:

$ yarn add style-loader

然后webpack再次运行。


1
--save-dev!
克里斯·科伦科

11

我想补充一下关大卫的话。在较新版本的Webpack(V2 +)moduleDirectories中,已替换为modulesresolve他的答案的更新部分如下所示:

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

有关更多信息,您可以查看其官方文档。希望这可以帮助某人。


官方文档链接已断开(404)
Phil

8

在Webpack 3下,node_module在非标准位置,我必须同时使用resolveresolveLoader配置对象:

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

谢谢!这对我来说也是固定的。我将webpack嵌入到从其他文件夹运行的CLI中,因此找不到加载程序。设置模块正常__dirname + 'node_modules'工作!
ItalyPaleAle

1

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

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

(在webpack 1和2中均可使用


1

我使用Windows并完成了所有工作,但无济于事。看来控制台没有足够的权限。因此,在管理员模式下运行后,我重新输入了

npm install

并且一切正常。您可以通过在node_modules目录中出现很多模块来查看结果。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.