web-dev-qa-db-fra.com

Erreur: Impossible de résoudre le module 'style-loader'

J'utilise style-loader avec webpack et framework rea. Lorsque j'exécute Webpack dans un terminal, je reçois Module not found: Error: Cannot resolve module 'style-loader' dans le fichier import.js bien que j'ai correctement spécifié le chemin du fichier.

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

Essayez de lancer le script ci-dessous:

npm install style-loader --save

Modifiez la configuration du pack Web, ajoutez le champ modulesDirectories dans resolve.

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

S'il vous plaît exécuter ce script:

 npm install style-loader css-loader --save

Définissez votre module comme ci-dessous:

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

En gros, c'est comme pour les chargeurs - testez jsx avec babel-loader et le prochain test est un fichier css utilisant style-loader et css-loader, qui reconnaîtra les modules. En outre, vous devez quitter npm start, exécuter "npm install" et "npm start". Espérons que cela devrait régler le problème.

18
PKA

Si vous essayez d'importer un fichier css avec cette ligne:

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

et ont ajouté le style-loader dans votre configuration Webpack.

L'erreur indique:

Module introuvable: erreur: impossible de résoudre le 'chargeur de style' du module

le module nommé "style-loader" n'est pas résolu.

Vous devez installer ce module avec:

$ npm install style-loader --save

Ou, si vous utilisez du fil:

$ yarn add style-loader

Ensuite, exécutez à nouveau webpack.

10
sealocal

Je voulais ajouter quelque chose à ce que David Guan a dit. Dans les versions plus récentes de Webpack (V2 +), moduleDirectories a été remplacé par modules. La partie resolve mise à jour de sa réponse ressemblerait à ceci:

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

Pour plus d'informations, vous pouvez consulter leur documentation officielle . J'espère que cela aide quelqu'un là-bas.

8
StephenSolace

Sous Webpack 3, avec node_module dans un emplacement non standard, j'ai dû utiliser les objets resolve et resolveLoader configuration:

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

Si vous êtes node_modules et que le même répertoire que votre fichier de configuration webpack vous pouvez simplement ajouter context: __dirname.

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

(fonctionne dans les deux webpack 1 et 2 )

1
Daniel

J'utilise Windows et tout fait mais rien n'a fonctionné. Il est apparu que la console n'avait pas assez d'autorisations. Donc, après avoir exécuté en mode administrateur, je suis entré à nouveau 

npm install

et tout a fonctionné. Vous pouvez voir le résultat en affichant beaucoup de modules dans le répertoire node_modules.

0
Turkhan Badalov