错误：无法解析module“样式加载器”

IT技术 javascript reactjs webpack webpack-style-loader
2021-05-19 01:44:55

我正在使用带有 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']
        }
    }
};
4个回答

尝试运行下面的脚本：

npm install style-loader --save

修改 webpack 配置，modulesDirectories在resolve.

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

请运行这个脚本：

 npm install style-loader css-loader --save

设置你的module如下：

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 文件，它将识别module。此外，您应该退出 npm start，然后运行“npm install”并运行“npm start”。希望这应该能解决这个问题。

如果您尝试使用此行导入 css 文件：

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

并style-loader在您的 webpack 配置中添加了。

错误指出：

找不到module：错误：无法解析module“样式加载器”

名为“style-loader”的module未解析。

您需要使用以下命令安装该module：

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

有关更多信息，您可以查看他们的官方文档。希望这可以帮助那里的人。

其它你可能感兴趣的问题
上一篇如何在 React.js 中传递一组项目 下一篇Jest, Enzyme: Invariant Violation: 你不应该在 <Router> 之外使用 <Route> 或 withRouter()