web-dev-qa-db-ja.com

エラー：モジュール 'style-loader'を解決できません

スタイルローダーをwebpackと反応フレームワークで使用しています。ターミナルでwebpackを実行すると、import.jsファイルでModule not found: Error: Cannot resolve module 'style-loader'が取得されますが、ファイルパスを正しく指定しました。

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
60
Rahul Dagli

以下のスクリプトを実行してみてください。

npm install style-loader --save

Webpack構成を変更し、modulesDirectoriesにresolveフィールドを追加します。

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

このスクリプトを実行してください：

 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をテストし、次のテストはスタイルローダーとcss-loaderを使用してモジュールを認識するcssファイルです。また、npm startを終了し、「npm install」を実行して「npm start」を実行する必要があります。うまくいけば、これで問題を解決できるはずです。

22
PKA

この行でcssファイルをインポートしようとする場合：

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

ウェブパックの設定にstyle-loaderを追加しました。

エラー状態：

モジュールが見つかりません：エラー：モジュール 'style-loader'を解決できません

moduleという名前の「style-loader」は解決されません。

そのモジュールをインストールする必要があります：

$ npm install style-loader --save

または、糸を使用している場合：

$ yarn add style-loader

その後、webpackを再度実行します。

10
sealocal

David Guan が言ったことに付け加えたかった。新しいバージョンのWebpack（V2 +）では、moduleDirectoriesがmodulesに置き換えられました。彼の回答の更新されたresolve部分は次のようになります。

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

詳細については、 公式ドキュメント をご覧ください。これが誰かに役立つことを願っています。

9
StephenSolace

Webpack 3では、node_moduleが標準以外の場所にあるため、resolveと resolveLoader 構成オブジェクトの両方を使用する必要がありました。

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

Node_modulesがwebpack設定ファイルと同じディレクトリにある場合は、context: __dirnameを追加するだけです。

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

（両方で動作しますwebpack 1および2）

1
Daniel

私はWindowsを使用してすべてを実行しましたが、何も機能しませんでした。コンソールに十分な権限がなかったようです。だから、管理者モードで実行した後、私は再び入りました

npm install

そしてすべてが働いた。 node_modulesディレクトリに多くのモジュールを表示することで、結果を見ることができます。

0
Turkhan Badalov