Fout: Kan module ‘style-loader’ niet oplossen

Ik gebruik style-loader met webpack en react framework. Wanneer ik webpack in terminal uitvoer, krijg ik Module not found: Error: Cannot resolve module 'style-loader'niet oplossen in import.js-bestand, hoewel ik het bestandspad correct heb opgegeven.

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

Antwoord 1, autoriteit 100%

Probeer hieronder het script uit te voeren:

npm install style-loader --save

Wijzig de webpack-configuratie, voeg het veld modulesDirectoriestoe in resolve.

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

Antwoord 2, autoriteit 29%

Voer dit script uit:

npm install style-loader css-loader --save

Stel uw module in zoals hieronder:

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

Het is eigenlijk hetzelfde als voor loaders – test jsx met babel-loader en de volgende test is een css-bestand met style-loader en css-loader, die de modules zullen herkennen. U moet ook npm start afsluiten en “npm install” en “npm start” uitvoeren. Hopelijk zou dit het probleem moeten oplossen.

Antwoord 3, autoriteit 17%

Als je een css-bestand probeert te importeren met deze regel:

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

en heb de style-loadertoegevoegd aan je webpack-configuratie.

De fout meldt:

Module niet gevonden: fout: kan module ‘style-loader’ niet oplossen

de modulegenaamd “style-loader” is niet opgelost.

Je moet die module installeren met:

$ npm install style-loader --save

Of, als je garen gebruikt:

$ yarn add style-loader

Voer vervolgens webpackopnieuw uit.

Antwoord 4, autoriteit 12%

Ik wilde iets toevoegen aan wat David Guanzei. In de nieuwere versies van Webpack (V2+) is moduleDirectoriesvervangen door modules. Het bijgewerkte resolve-gedeelte van zijn antwoord ziet er als volgt uit:

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

Voor meer informatie kun je hun officiële documentatieraadplegen. Ik hoop dat dit iemand helpt.

Antwoord 5, autoriteit 10%

Onder Webpack 3, met node_moduleop een niet-standaard locatie, moest ik zowel resolveals resolveLoaderconfiguratieobjecten:

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

Antwoord 6, autoriteit 2%

Ik gebruik Windows en deed alles, maar niets werkte. Het leek erop dat de console niet genoeg rechten had. Dus, nadat ik in de beheerdersmodus had uitgevoerd, ging ik opnieuw naar

npm install

en alles werkte. U kunt het resultaat zien door veel modules in de map node_modules te laten verschijnen.

Antwoord 7

Als je node_modules in dezelfde map staan ​​als je webpack-configuratiebestand, kun je eenvoudig context: __dirnametoevoegen.

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

(werkt in zowel webpack 1 als 2)

Antwoord 8

het is heel eenvoudig dat je de eerste syle-loader de css-loader moet installeren.