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

Posted 2023-02-21

【中文标题】错误：无法解析模块“样式加载器”

【英文标题】：Error: Cannot resolve module 'style-loader'

【发布时间】：2016-05-12 07:26:17

【问题描述】：

我将 style-loader 与 webpack 和 react 框架一起使用。当我在终端中运行 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']
        
    
;

【参考方案1】：

很简单，你必须安装第一个 syle-loader 和 css-loader。

【讨论】：

最好包含安装缺失模块的基本步骤。

【参考方案2】：

我想补充David Guan 所说的内容。在较新版本的 Webpack (V2+) 中，moduleDirectories 已替换为 modules。他的答案更新后的resolve 部分如下所示：

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

有关更多信息，您可以查看他们的official documentation。希望这对那里的人有所帮助。

【讨论】：

官方文档链接已损坏 (404)

【参考方案3】：

在 Webpack 3 下，node_module 位于非标准位置，我必须同时使用 resolve 和 resolveLoader 配置对象：

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

【讨论】：

谢谢！这也为我解决了。我将 webpack 嵌入到从其他文件夹运行的 CLI 中，因此它找不到我的加载器。将模块设置为 __dirname + 'node_modules' 有效！

【参考方案4】：

我使用 Windows 并且做了所有事情，但没有任何效果。看来控制台没有足够的权限。所以，在管理员模式下运行后我重新进入了

npm install

一切正常。你可以通过在node_modules目录中出现很多模块来看到结果。

【参考方案5】：

如果你的 node_modules 与你的 webpack 配置文件在同一个目录下，你可以简单地添加 context: __dirname。

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

（适用于 webpack 1 和 2）

【参考方案6】：

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

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

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

错误状态：

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

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

您需要安装该模块：

$ npm install style-loader --save

或者，如果您使用的是纱线：

$ yarn add style-loader

然后再次运行webpack。

【讨论】：

--save-dev please!

【参考方案7】：

尝试运行以下脚本：

npm install style-loader --save

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

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

【讨论】：

感谢成功，我之前安装了npm install style-loader css-loader --save-dev，但由于某种原因它不起作用。

你能上传你的 webpack 配置文件吗？

答案已更新，只需在resolve 中添加modulesDirectories 。

对我有用，但也必须安装 uri-loader 和 file-loader 模块

这个回复在尝试使用 webpack 运行 react 时对我有帮助

【参考方案8】：

请运行此脚本：

 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，下一个测试是使用 style-loader 和 css-loader 的 css 文件，它将识别模块。此外，您应该退出 npm start，然后运行“npm install”并运行“npm start”。希望这能解决这个问题。