Помилка: Не вдається вирішити модуль "завантажувач стилів"

Я використовую завантажувач стилів з веб-пакетом і реагую на фреймворк. Коли я запускаю 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

Змінити конфігурацію веб-пакета, додати 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']
  }
}

В основному це читання, як для навантажувачів - протестуйте jsx за допомогою babel-loader, а наступним тестом є файл css із використанням style-loader та css-loader, який розпізнає модулі. Крім того, вам слід вийти з npm start, запустити "npm install" і запустити "npm start". Сподіваємось, це повинно подбати про проблему.

Якщо ви намагаєтесь імпортувати файл CSS за допомогою цього рядка:

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

і додали style-loaderфайл у конфігурацію вашого веб-пакета.

Помилка зазначає:

Модуль не знайдено: Помилка: Не вдається розв'язати модуль 'style-loader'

модуль під назвою «стиль-навантажувач» не вирішене.

Вам потрібно встановити цей модуль за допомогою:

$ npm install style-loader --save

Або, якщо ви використовуєте пряжу:

$ yarn add style-loader

Потім біжи webpackзнову.

Я хотів додати до того, що сказав Девід Гуан . У нових версіях Webpack (V2 +) moduleDirectoriesбуло замінено на modules. Оновлена resolveчастина його відповіді буде виглядати так:

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

Для отримання додаткової інформації ви можете ознайомитися з їх офіційною документацією . Сподіваюся, це допомагає комусь там.

У Webpack 3, node_moduleу нестандартному розташуванні, мені довелося використовувати resolveі resolveLoaderоб'єкти конфігурації:

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

Якщо ви node_modules знаходяться в тому самому каталозі, що і файл конфігурації веб-пакета, ви можете просто додати context: __dirname.

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

(працює в обох веб- пакетах 1 і 2 )

Я використовую Windows і роблю все, але нічого не працює. Здавалося, у консолі недостатньо дозволів. Отже, після запуску в режимі адміністратора я знову ввійшов

npm install

і все працювало. Ви можете побачити результат, з’явивши багато модулів у каталозі node_modules.

дуже просто, вам доведеться встановити перший навантажувач програми css-навантажувач.