Ошибка: не Может разрешить модуль 'загрузчик стиля'

Question 1

Я использую загрузчик стиля с webpack и реагирую платформа. Когда я выполняю 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']
        }
    }
};

Question 2

Попробуйте запущенный скрипт ниже:

npm install style-loader --save

Изменяют конфигурацию webpack, добавляют modulesDirectories поле в resolve.

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

Question 3

Question 4

При попытке импортировать файл CSS с этой строкой:

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

и добавили style-loader в Вашей конфигурации webpack.

состояния ошибки:

Модуль, не найденный: Ошибка: не Может разрешить модуль 'загрузчик стиля'

, модуль названный "загрузчиком стиля" не разрешен.

необходимо установить тот модуль с:

$ npm install style-loader --save

Или, если Вы используете пряжу:

$ yarn add style-loader

Затем работает webpack снова.

Question 5

Я хотел прибавить к тому, что сказал David Guan . В более новых версиях Webpack (V2 +) moduleDirectories был заменен modules. Обновленный resolve часть его ответа был бы похож на это:

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

Для получения дополнительной информации можно проверить их официальная документация . Надежда это помогает кому-то там.

Question 6

Под Webpack 3, с node_module в нестандартном месте, я должен был использовать и resolve и resolveLoader объекты конфигурации:

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

Question 7

Question 8

Если Вы - node_modules, находятся на том же dir как Ваш webpack файл конфигурации, который можно просто добавить context: __dirname.

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

(работает и в webpack 1 и в 2 )

Question 9

Я использую Windows и сделал все ни кроме чего, работал. Казалось, что консоль не имела достаточного количества полномочий. Так, после выполнения в режиме Admin я повторно ввел

npm install

, и все работало. Вы видите результат путем появления большого количества модулей в node_modules каталоге.

Question 10

Запустите этот скрипт:

 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, использование загрузчика столпотворения и следующего теста является файлом CSS с помощью загрузчика стиля и загрузчика CSS, который распознает модули. Кроме того, необходимо выйти из npm, запускаются, и выполняют "npm установку" и работают "npm, запускаются". Хотелось бы надеяться, это должно заботиться о проблеме.

David Guan · Accepted Answer · 31 October 2019 в 13:58