Fehler: Modul 'Style-Loader' kann nicht aufgelöst werden

78

Ich benutze Style-Loader mit Webpack und React Framework. Wenn ich Webpack im Terminal ausführe, erhalte Module not found: Error: Cannot resolve module 'style-loader'ich die Datei import.js, obwohl ich den Dateipfad korrekt angegeben habe.

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

Antworten:

88

Versuchen Sie, das folgende Skript auszuführen:

npm install style-loader --save

Ändern Sie die Webpack-Konfiguration und fügen Sie ein modulesDirectoriesFeld hinzu resolve.

    resolve: {
        extensions: ['', '.js', '.jsx', '.css'],
        modulesDirectories: [
          'node_modules'
        ]        
    }
David Guan
quelle
2
Danke, das hat funktioniert, ich hatte es zuvor installiert, npm install style-loader css-loader --save-devaber aus irgendeinem Grund hat es nicht funktioniert.
Rahul Dagli
Könnten Sie Ihre Webpack-Konfigurationsdatei hochladen?
David Guan
1
Antwort aktualisiert, muss nur hinzufügen , modulesDirectories in resolve.
David Guan
arbeitete für mich, musste aber auch
Uri-Loader-
Diese Antwort hilft mir beim Versuch, mit Webpack zu reagieren
Faris Rayhan
24

Bitte führen Sie dieses Skript aus:

 npm install style-loader css-loader --save

Stellen Sie Ihr Modul wie folgt ein:

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

Es liest sich im Grunde wie bei Loadern - testen Sie jsx mit babel-loader und der nächste Test ist eine CSS-Datei mit Style-Loader und CSS-Loader, die die Module erkennt. Außerdem sollten Sie npm start beenden und "npm install" und "npm start" ausführen. Hoffentlich sollte dies das Problem beheben.

PKA
quelle
12

Wenn Sie versuchen, eine CSS-Datei mit dieser Zeile zu importieren:

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

und haben die style-loaderin Ihrer Webpack-Konfiguration hinzugefügt .

Der Fehler lautet:

Modul nicht gefunden: Fehler: Modul 'Style-Loader' kann nicht aufgelöst werden

Das Modul "Style-Loader" wird nicht aufgelöst.

Sie müssen dieses Modul installieren mit:

$ npm install style-loader --save

Oder wenn Sie Garn verwenden:

$ yarn add style-loader

Dann webpackwieder laufen .

Sealocal
quelle
1
--save-dev bitte!
Chris Kolenko
11

Ich wollte das ergänzen, was David Guan sagte. In den neueren Versionen von Webpack (V2 +) moduleDirectorieswurde durch ersetzt modules. Der aktualisierte resolveTeil seiner Antwort würde folgendermaßen aussehen:

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

Weitere Informationen finden Sie in der offiziellen Dokumentation . Hoffe das hilft jemandem da draußen.

StephenSolace
quelle
Offizieller Dokumentationslink ist defekt (404)
Phil
8

Unter Webpack 3 musste node_moduleich an einem nicht standardmäßigen Speicherort sowohl Konfigurationsobjekte resolveals auch resolveLoaderKonfigurationsobjekte verwenden:

resolve: {
  modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
  modules: ["build-resource/js/node_modules"]
},
sinistral
quelle
Vielen Dank! Dies wurde auch für mich behoben. Ich binde ein Webpack in eine CLI ein, die von anderen Ordnern ausgeführt wird, sodass meine Loader nicht gefunden werden konnten. Module auf __dirname + 'node_modules'funktioniert setzen!
ItalyPaleAle
1

Wenn sich Ihre node_modules im selben Verzeichnis wie Ihre Webpack-Konfigurationsdatei befinden, können Sie sie einfach hinzufügen context: __dirname.

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

(funktioniert sowohl in Webpack 1 als auch in Webpack 2 )

Daniel
quelle
1

Ich benutze Windows und habe alles getan, aber nichts hat funktioniert. Es schien, dass die Konsole nicht genügend Berechtigungen hatte. Nachdem ich im Admin-Modus gelaufen war, trat ich wieder ein

npm install

und alles hat funktioniert. Sie können das Ergebnis sehen, indem Sie viele Module im Verzeichnis node_modules anzeigen.

Turkhan Badalov
quelle
1

Es ist sehr einfach, den ersten Syle-Loader und den CSS-Loader zu installieren.

Vivek Gupta
quelle
Es ist besser, die wesentlichen Schritte zur Installation des fehlenden Moduls einzuschließen.
Alizain Prasla