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']
}
}
};
javascript
reactjs
webpack
webpack-style-loader
Rahul Dagli
quelle
quelle
npm install style-loader css-loader --save-dev
aber aus irgendeinem Grund hat es nicht funktioniert.modulesDirectories
inresolve
.Bitte führen Sie dieses Skript aus:
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.
quelle
Wenn Sie versuchen, eine CSS-Datei mit dieser Zeile zu importieren:
import '../css/style.css';
und haben die
style-loader
in Ihrer Webpack-Konfiguration hinzugefügt .Der Fehler lautet:
Das Modul "Style-Loader" wird nicht aufgelöst.
Sie müssen dieses Modul installieren mit:
Oder wenn Sie Garn verwenden:
Dann
webpack
wieder laufen .quelle
Ich wollte das ergänzen, was David Guan sagte. In den neueren Versionen von Webpack (V2 +)
moduleDirectories
wurde durch ersetztmodules
. Der aktualisierteresolve
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.
quelle
Unter Webpack 3 musste
node_module
ich an einem nicht standardmäßigen Speicherort sowohl Konfigurationsobjekteresolve
als auchresolveLoader
Konfigurationsobjekte verwenden:resolve: { modules: ["build-resource/js/node_modules"] }, resolveLoader: { modules: ["build-resource/js/node_modules"] },
quelle
__dirname + 'node_modules'
funktioniert setzen!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 )
quelle
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
und alles hat funktioniert. Sie können das Ergebnis sehen, indem Sie viele Module im Verzeichnis node_modules anzeigen.
quelle
Es ist sehr einfach, den ersten Syle-Loader und den CSS-Loader zu installieren.
quelle