找不到模块:错误:无法解析“sass-loader”

2024-03-04

刚接触 webpack。尝试让 sass-loader 与我的 React 项目配合良好,已遵循教程。配置似乎正确,但结果始终是“无法解析'sass-loader'”。

我怀疑这是一些明显的错误,但我还没有通过任何搜索或谷歌搜索找到它。任何帮助表示赞赏。

Error

ERROR in ./ui/index.js
Module not found: Error: Can't resolve 'sass-loader' in '/root/src'
 @ ./ui/index.js 19:0-33
 @ multi webpack-hot-middleware/client?reload=true babel-polyfill ./ui/index.js

到目前为止我所做的(在上述现有的反应项目上):

npm i --save-dev node-sass sass-loader

package.json,在 devDependencies 下

"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"webpack": "~2.2.1",
"webpack-dev-middleware": "~1.12.0",
"webpack-hot-middleware": "~2.20.0",
"webpack-node-externals": "~1.6.0"

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './src/App';

require('./src/styles/main.scss');

ReactDOM.render(<HashRouter><App /></HashRouter>, 
document.getElementById('root'));

webpack.config.react.js:

const path = require('path');
const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const sourcePath = path.join(__dirname, './ui');
const extractStyle = new ExtractTextPlugin('styles.css');

//======break to module rules=======

module: {
  rules: [
    {
      test: /\.jsx?$/,
      include: sourcePath,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react'],
      },
    },
    {
      test: /\.scss$/,
      include: sourcePath,
      exclude: /node_modules/,
      use: extractStyle.extract('sass-loader?sourceMap'),
    },
    {
      test: /\.css$/,
      exclude: sourcePath,
      loader: extractStyle.extract('css-loader'),
    },
  ],
},

//======= break again for plugins =====

plugins: [
  extractStyle,
  new HtmlWebpackPlugin({
    template: 'ui/index.html',
    title: 'name',
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development'),
  }),
]

可能的混淆因素:这一切都在开发 Docker 容器中运行。不过,它已被重建并且 npm install 已再次运行。


进入项目并运行下面两个命令

npm install sass-loader -D

npm install node-sass -D
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

找不到模块:错误:无法解析“sass-loader” 的相关文章

  • post-css 未从 node_modules 找到路径

    我目前有一个 Angular 项目 我希望使用 purgecss 清除 css 我已经一切正常 但是当我导入 node modules 时 它很困难 因为它找不到位于 node modules 文件夹中的路径 我有当前的app scss f
  • 如何使用 webpack 从 node_modules 加载静态 CSS 文件的示例?

    我不知道如何使用 webpack 从 node modules 库加载任何 CSS 例如我已经安装了 leaflet 以及每次尝试加载leaflet dist leaflet css fails 您能提供如何从node modules加载静
  • webpack - 如何将捆绑包提取到各个组件

    我想从bundle js 一个webpack文件 中解压 提取所有组件和js文件 我只留下这个文件 我已经用谷歌搜索并尝试了几种方法来解压捆绑js文件 但它没有成功 我也尝试过该解决方案 请查找参考 如何提取Webpack中的bundle
  • 使用 webpack 动态提供图像

    我有一个关于 webpack 和服务图像的问题 我有一个 webpack 配置 它构建了一个 React webapp 并且还提供来自特定文件夹的 jpg 文件 但是 如果我从我的网络应用程序下载新图像并将其添加到此文件夹中 会发生什么情况
  • 为什么要费心 CommonJS require.ensure() 中的依赖项列表?

    来自 Webpack 文档 https webpack github io docs api in modules html require ensure https webpack github io docs api in module
  • 如何使用 gulp webpack-stream 生成正确命名的文件?

    目前我们正在使用Webpack https webpack github io 对于我们的模块加载器 以及Gulp http gulpjs com 对于其他一切 sass gt css 以及开发 生产构建过程 我想将 webpack 的东西
  • 如何预渲染多个Vue应用页面?

    我正在尝试 未成功 在使用 Vue CLI 搭建的同一项目中预渲染多个 Vue 应用程序的 HTML 由于多种原因 我不想使用 Vue Router 或 Nuxt 等 我尝试过使用预渲染 Spa 插件 https github com ch
  • 未捕获的异常:无法找到 Mix 文件

    我正在尝试在本地系统中运行 laravel 应用程序 我已遵循https gist github com hootlex da59b91c628a6688ceb1 https gist github com hootlex da59b91c
  • 找不到模块“webpack”

    决定不在我的项目中使用 webpack 当我把它从package json出现以下错误ng s 找不到模块 webpack 错误 找不到模块 webpack 在 Function Module resolveFilename 内部 modu
  • 无法从静态文件夹加载图像

    如何在 Next js 的组件中加载图像 我必须先构建项目吗 如果是 有没有办法在不先构建的情况下加载图像 无论我如何尝试 我都无法让它发挥作用 来自文档 https nextjs org docs basic features stati
  • Webpack 5 和 ESM

    我想我已经阅读了 SO 上的每个线程以及互联网上的每个相关页面 所有内容都有一些问题的变体 I want 使用 webpack 捆绑我的 Web 应用程序 在我的源 js 中使用 ES 模块并将它们转译为更广泛的浏览器支持 在我的 webp
  • 使用HTMLWebpackPlugin时如何通过webpack加载图片?

    我正在使用 HTMLWebpackPlugin 在我的模板中我有一个 img 标签 img src images logo png 如果您注意到 这里我使用相对路径 认为 webpack 将触发在 webpack config js 文件中
  • 我可以打包 Webpack 但不缩小调试范围吗?

    似乎是一个真正愚蠢的问题 必须在某个地方有答案 但我已经搜索了几个小时但没有结果 我是 ReactJS 和使用 Webpack 构建的新手 一般来说是构建配置 我正在使用 Webpack 链接和捆绑我的整个项目 包括 ReactJS 它工作
  • Webpack 5 - 资产模块 - 缺少 url-loader 功能 - postTransformPublicPath

    我想按照建议切换到 webpack 5 asset 模块 不幸的是我错过了 webpack url loader 的函数 postTransformPublicPath path any gt any 由于我们应用程序的结构 资产的公共区域
  • 为什么 Webpack 忽略我的 CSS 文件?

    我正在尝试让 webpack 将我的 CSS 文件 使用 PostCSS 编译为单独的文件 从文档来看 这似乎正是 ExtractTextPlugin 应该做的 但是 我无法让 webpack 对我的 CSS 文件执行任何操作 相关项目结构
  • npm install -D sass-loader node-sass Vue.js 2021

    您好 问题是为 Vue js 设置 SASS 我跑 Node js 15 7 0 Vue js vue cli 4 5 11 这是我在运行此命令时在控制台中遇到的错误 npm install D sass loader 节点 sass np
  • ./types 的大小写与底层文件系统不匹配

    所以我从 eslint 收到了一些奇怪的警告 types 是流类型文件 我认为 eslint 将 checkbox 读取为小写 而实际上它是 Checkbox 大写 C I try git mv casesensitive tmp git
  • 无法使用 webpack 加载 Node 原生插件

    虽然我正在使用vue cli在生成 webpack 配置的示例代码中 没有任何特定于 vue 的内容 我像这样创建示例应用程序 vue init webpack webpack modules example 生成webpack base
  • css-loader 不导入 .css 文件返回空对象

    从 css 文件导入样式 返回空对象 看来 css loader 无法正常工作 谁可以帮我这个事 请找到下面的参考文件 index js import React from react import style from header cs
  • webpack中动态加载外部模块失败

    我正在尝试建立以下架构 一个核心 React 应用程序 它具有一些基本功能 并且能够在运行时加载其他 React 组件 这些额外的 React 组件可以按需加载 并且它们在构建核心应用程序时不可用 因此它们不能包含在核心应用程序的捆绑包中

随机推荐

  • 在 Delphi 中读取/解析非类型二进制文件的最佳方法

    我想知道解析非类型二进制文件的最佳方法是什么 例如 EBML 文件 http ebml sourceforge net EBML 基本上是一个二进制 xml 文件 它基本上可以存储任何内容 但目前它的主要用途是 MKV 视频文件 matro
  • 从数据库sqlite获取信息

    如何从数据库中获取信息 我想执行这一行 String nom db execSQL select name from person where id id 任何人都可以纠正我这一行以从表中获取人名吗 如果您的 id 是整数数据类型 请尝试此
  • 检测设备是否支持通话?

    下面的代码可以可靠地用来确定设备是否支持通话吗 我担心的是 如果苹果将 iphone 字符串更改为其他内容 假设他们决定拥有 iphone 3g iphone 4 等 UIDevice currentDevice model isEqual
  • Xamarin.forms 在 web 视图中显示 PDF 不起作用

    我从我的服务器下载 pdf 流 在我的应用程序中 我将 bytearray 作为 pdf 保存到本地文件夹中 但是当我在网络视图中打开它时 它只显示一个白色页面 我按照这个例子 https developer xamarin com rec
  • java.lang.illegalstateException数据库未打开android

    当我尝试插入数据库日志时 猫显示如下错误java lang illegalstateexception database not open android 但我已经使用打开数据库 db SQLiteDatabase openDatabase
  • Rails Admin 与 Active Admin:Rails Admin 生成工具[重复]

    这个问题在这里已经有答案了 可能的重复 Rails Admin 与 ActiveAdmin https stackoverflow com questions 6542075 rails admin vs activeadmin 我知道已经
  • Laravel:路由中间件和策略之间的区别

    使用 Laravel 开发应用程序我意识到可以做什么Policy完全可以用Middleware 假设我想阻止用户更新路线 如果他 她不是信息的所有者 我可以轻松地从路线中进行检查 并且可以从策略中执行相同的操作 所以我的问题是为什么我应该使
  • 我如何使用 Passport-local.js 存储其他表单字段

    我正在研究 node passport js 身份验证 我制作了一个简单的登录 注册应用程序 它工作正常 但是它只存储用户名和密码 如何通过具有工作登录护照身份验证的 Signup html 页面将其他表单字段 例如电话号码 电子邮件 爱好
  • 检查后台限制数据是否开启?

    我有一个在主线程上运行而不是在后台运行的服务 在服务中 我正在通过广播接收器检查网络连接 当我启用限制数据已启用在 设置 中 广播接收器可以很好地捕捉意图 但我的应用程序已禁用互联网连接 移动数据 尽管它在我的设备上 我见过这个问题 htt
  • 如何测试 Spark RDD

    我不确定我们是否可以在 Spark 中测试 RDD 我发现一篇文章说模拟 RDD 不是一个好主意 是否有其他方法或最佳实践来测试 RDD 感谢您提出这个悬而未决的问题 出于某种原因 当谈到 Spark 时 每个人都过于专注于分析 以至于忘记
  • 此信封实现是否正确使用 C++11 原子?

    我编写了一个简单的 信封 类 以确保我正确理解 C 11 原子语义 我有一个标头和一个有效负载 编写器清除标头 填充有效负载 然后用递增的整数填充标头 这个想法是 读取器然后可以读取标头 memcpy 出有效负载 再次读取标头 如果标头相同
  • B-Prolog 中带有累加器的嵌套循环

    B Prolog 具有逻辑循环 例如 我们可以这样计算 1 2 3 的和 test1 foreach A in 1 3 ac Sa 0 Sa 1 is Sa 0 A writeln sa Sa test1 test1 sa 6 yes 但是
  • Android 初始化 Visualizer 时出现错误代码 -3

    初始化时出现此错误Visualizer visualizer new Visualizer mediaPlayer getAudioSessionId lt 错误 无法初始化 Visualizer 引擎 错误 3 java lang Run
  • Twitter bootstrap:跨浏览器圆角和渐变?

    有什么方法可以添加 Twitter Bootstrap 跨浏览器对圆角和 CSS 渐变的支持 阅读 愚蠢的 IE 7 支持 我会使用 CSSPIE http css3pie com http css3pie com 这是一个 htc 文件
  • 有 XWalkView webviewclient 吗?

    我正在尝试使用XWalkView作为我的 Android 应用程序中的 webview 替代品 我注意到没有setWebViewClient方法上XWalkView目的 问题是我想检查页面何时完成 onPageFinished 以及资源加载
  • 在同一服务器上部署 ASP.net Ajax 1.0 和 3.5 Web 应用程序

    我们有一个生产服务器 其中运行 Ajax 1 0 的 ASP net 2 0 应用程序和相应的工具包 工具包版本 1 0 20229 我被要求使用 ASP net 3 5 移动另一个应用程序构建 该应用程序也利用了最新的 ASP NET A
  • 如何计算 NSArray 中的重复值?

    我的价值NSArray包括重复项 我找到了重复项 但现在我怎样才能找到没有 他们重复 您可以使用NSCountedSet http developer apple com library ios documentation Cocoa Re
  • pandas 过滤和比较日期

    我有一个 sql 文件 其中包含我读入 pandas 的数据 df pandas read sql Database count details con engine index col id parse dates newest avai
  • 雪花不旋转

    我需要转置一个表 其中column1 是实体的名称 column2 到column366 是一年中包含美元金额的日期 表 select语句 输出结果都给定了 以下 问题 此语法要求我创建一个逗号分隔的列列表 基本上是 365 个日期 并在
  • 找不到模块:错误:无法解析“sass-loader”

    刚接触 webpack 尝试让 sass loader 与我的 React 项目配合良好 已遵循教程 配置似乎正确 但结果始终是 无法解析 sass loader 我怀疑这是一些明显的错误 但我还没有通过任何搜索或谷歌搜索找到它 任何帮助表