Błąd: Nie można rozpoznać modułu ładującego styl "

Question

Używam programu ładującego style z modułem Webpack i modułem reagowania. Po uruchomieniu komputera w terminalu otrzymuję plik Module not found: Error: Cannot resolve module 'style-loader' w pliku import.js, mimo że podałem poprawnie ścieżkę pliku.

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

Answer 1

Spróbuj uruchomić skrypt poniżej:

npm install style-loader --save

Zmienić WebPack config, dodać modulesDirectories pole w resolve.

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

Answer 2

Proszę uruchomić ten skrypt:

npm install style-loader css-loader --save 

ustawić swój moduł, jak poniżej:

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

To w zasadzie czytania jak dla ładowarek - test JSX użyciu Babel ładującego a następny test jest plik css za pomocą style-loader i css-loader, który rozpozna moduły. Powinieneś także wyjść z npm start i uruchomić "npm install" i uruchomić "npm start". Mam nadzieję, że powinno to zająć się problemem.

Answer 3

Jeśli spróbujesz zaimportować plik css z tej linii:

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

i dodaniu style-loader w WebPACK config.

Państwa błędach:

Module not found: Error: Cannot resolve module 'style-loader'

moduł nazwie "style-ładowarka" nie jest rozwiązany.

Musisz zainstalować ten moduł z:

$ npm install style-loader --save 

Lub, jeśli używasz przędzy:

$ yarn add style-loader 

następnie uruchomić webpack ponownie.

Answer 4

Jeśli jesteś node_modules są w tym samym dir co plik konfiguracyjny Webpack można po prostu dodać context: __dirname.

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

(działa w obie WebPack 1 i 2)

Answer 5

Chciałem dodać do tego, co David Guan powiedział. W nowszych wersjach pakietu Webpack (V2 +) moduleDirectories został zastąpiony przez modules. Zaktualizowana resolve część jego odpowiedź będzie wyglądać następująco:

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

Aby uzyskać więcej informacji, można sprawdzić ich official documentation.Mam nadzieję, że to pomaga komuś tam.

Answer 6

Pod WebPacka 3, z node_module w niestandardowym miejscu, musiałem użyć obu resolve i resolveLoader obiektów konfiguracji:

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