wake-up-neo.com

Fehler: Modul 'style-loader' kann nicht aufgelöst werden

Ich benutze den Style-Loader mit dem Webpack und React Framework. Wenn ich webpack in terminal starte, erhalte ich Module not found: Error: Cannot resolve module 'style-loader' in der Datei import.js, obwohl ich den Dateipfad richtig 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']
        }
    }
};
javascriptreactjswebpackwebpack-style-loader
55
Rahul Dagli

Führen Sie das folgende Skript aus:

npm install style-loader --save

Ändern Sie die Webpack-Konfiguration und fügen Sie das Feld modulesDirectories in resolve hinzu.

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

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 ist im Grunde wie für Loader zu lesen - teste 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 sich das darum kümmern.

18
PKA

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

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

und haben den style-loader in Ihre Webpack-Konfiguration eingefügt.

Der Fehler lautet:

Modul nicht gefunden: Fehler: Modul 'style-loader' kann nicht aufgelöst werden

das module named "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

Führen Sie dann erneut webpack aus.

10
sealocal

Ich wollte hinzufügen, was David Guan sagte. In den neueren Versionen von Webpack (V2 +) wurde moduleDirectories durch modules ersetzt. Der aktualisierte resolve-Teil 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.

8
StephenSolace

Unter Webpack 3 mit node_module an einem nicht standardmäßigen Speicherort musste ich sowohl resolve als auch resolveLoader Konfigurationsobjekte verwenden:

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

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

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

(funktioniert in beiden webpack 1 und 2 )

1
Daniel

Ich benutze Windows und habe alles gemacht, aber nichts hat funktioniert. Es schien, als hätte die Konsole nicht genügend Berechtigungen. Nach dem Ausführen im Admin-Modus trat ich erneut ein 

npm install

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

0
Turkhan Badalov