오류 : 'style-loader'모듈을 해결할 수 없습니다.

webpack 및 react 프레임 워크와 함께 스타일 로더를 사용하고 있습니다. 터미널에서 webpack을 실행할 때 Module not found: Error: Cannot resolve module 'style-loader'파일 경로를 올바르게 지정했지만 import.js 파일에 들어갑니다.

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

아래 스크립트를 실행 해보십시오.

npm install style-loader --save

webpack 구성을 수정 modulesDirectories하고 resolve.

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

이 스크립트를 실행하십시오 :

 npm install style-loader css-loader --save

모듈을 아래와 같이 설정하십시오.

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

기본적으로 로더에 대해 읽고 있습니다. babel-loader를 사용하여 jsx를 테스트하고 다음 테스트는 모듈을 인식하는 style-loader와 css-loader를 사용하는 css 파일입니다. 또한 npm start를 종료하고 "npm install"을 실행하고 "npm start"를 실행해야합니다. 이 문제가 해결되기를 바랍니다.

다음 줄을 사용하여 css 파일을 가져 오려고하면 :

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

style-loader웹팩 구성에을 추가했습니다 .

오류 상태 :

모듈을 찾을 수 없음 : 오류 : '스타일 로더'모듈을 해결할 수 없습니다.

그만큼 모듈 "스타일 로더"라는 이름이 해결되지 않습니다.

다음을 사용하여 해당 모듈을 설치해야합니다.

$ npm install style-loader --save

또는 원사를 사용하는 경우 :

$ yarn add style-loader

그런 다음 webpack다시 실행 하십시오.

나는 David Guan의 말 에 덧붙이고 싶었습니다 . 최신 버전의 Webpack (V2 +) moduleDirectories에서 modules. resolve그의 답변 의 업데이트 된 부분은 다음과 같습니다.

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

자세한 내용은 공식 문서를 확인하십시오 . 이것이 누군가를 돕기를 바랍니다.

node_module비표준 위치에있는 Webpack 3에서는 resolve및 resolveLoader구성 개체를 모두 사용해야했습니다 .

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

node_modules가 webpack 구성 파일과 동일한 디렉토리에 있다면 간단히 context: __dirname.

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

( 웹팩 1과 2 모두에서 작동 )

나는 Windows를 사용하고 모든 것을 수행했지만 아무것도 작동하지 않았습니다. 콘솔에 충분한 권한이없는 것 같습니다. 그래서 관리자 모드로 실행 한 후 다시

npm install

그리고 모든 것이 작동했습니다. node_modules 디렉토리에 많은 모듈이 나타나 결과를 볼 수 있습니다.

첫 번째 syle-loader css-loader를 설치하는 것은 매우 간단합니다.