错误:无法解析模块“样式加载器"

本文介绍了错误:无法解析模块“样式加载器"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在将样式加载器与webpack和react框架一起使用.当我在终端中运行webpack时，我得到找不到模块:错误:尽管我已经正确指定了文件路径，但无法解析import.js文件中的模块'style-loader'.

I'm using style-loader with webpack and react framework. When I run webpack in terminal i'm getting Module not found: Error: Cannot resolve module 'style-loader' in import.js file although i've specified the file path correctly.

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-保存

修改webpack配置，在 resolve 中添加 modulesDirectories 字段.

Modify webpack config, add modulesDirectories field in resolve.

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

这篇关于错误:无法解析模块“样式加载器"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！