当前位置: 首页 > 面试题库 >

Webpack-Sass加载程序找不到图像

毛成济
2023-03-14
问题内容

sass loader医生说:"If you're just generating CSS without passing it to the css-loader, it must be relative to your web root"。因此,正如我所言,我已经将自己index.html放在文件夹中project root,然后尝试imagescss文件中加载。现在我有2个错误:1)来自Chrome's consoleCannot find module "./img/header.jpg"。2)来自我terminal

ERROR in ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/header.jpg in C:\Web-Development\React\Portfolio\public\css
 @ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-91

webpack.config.js

module.exports = {
    entry: './main.jsx',
    output: {
        filename: './public/js/build/bundle.js'
    },
    module: {
        loaders: [
            {
              test: /\.jsx?$/,
              exclude: /(node_modules|bower_components)/,
              loader: 'babel',
              query: {
                  presets: ['react', 'es2015']
              }
          },
          {
              test: /\.scss$/,
              loaders: ["style", "css", "sass", "resolve-url"]
          },
          {
            test: /\.jpg$/,
            loader: "file?name=[path][name].[ext]"
          }
        ]
    }
};

如果我看到自己的代码,则可以清楚地看到css位于内部,<head>因此正如文档所述,我已将映像的路径指向了根目录,但仍然无法修复。

更新: 我已经安装file-loader并按照说明进行操作,现在在控制台中收到此错误:GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119


问题答案:

为了解决这个问题,我已经上传了这个webpack的基本配置以启动我的项目,希望它可以对遇到此问题的所有人有所帮助。当然欢迎提出建议。



 类似资料:
  • 我在向遗留应用程序添加响应时遇到了一点麻烦。虽然我在入门时找到了大量的材料,但我遇到了一系列与我的特定配置相关的问题,并且由于我完全缺乏webpack知识而加剧了这些问题(如此多的时间依赖反应cli工具会让人松懈)。 我的配置: =mynode_modules,那是yarn安装模块的地方 =我的一般js文件夹,各种js脚本去那里 =我的dist文件夹,有些东西被构建/打包并在这里结束。这是建造的东

  • Hi问题是为Vue设置SASS。jsi-run:Node。js-15.7。0 Vue。js-@vue/cli4.5。11运行此命令时,我在控制台中遇到一个错误:npm install-D sass loader node sass

  • 本文向大家介绍webpack配置sass模块的加载的方法,包括了webpack配置sass模块的加载的方法的使用技巧和注意事项,需要的朋友参考一下 webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。 为了使用sass,我们需要安装sass的依赖包 当然了,使用样式的话,css-loader

  • 当我启动应用程序时,我没有看到任何错误,但是是一个空数组。组件本身位于。我试着直接加载图像: 但无论我指定的路径是什么,如果出现错误,它就不能正常工作了。但是,我需要从文件夹加载所有图像,而不是静态加载,因为我事先不知道图像的名称。如有任何建议,将不胜感激。

  • 我已经安装了boost库,它们位于中。我认为这个问题与可执行文件只在它所在的目录中查找有关,因为当我将'libboost_atomic.dylib'粘贴在那里时,它不再介意它了。不幸的是,它抱怨找不到下一个boost库。 有什么简单的方法可以解决这个问题吗?

  • 问题内容: 我需要做的事情很简单,但是(对我来说)很难做到: 使用 javascript ,给定图像名称,即“ image01.jpg”,我需要检查该图像是否存在于某个文件夹或路径(本地或网络)中。如果该文件夹下不存在该图像,则需要检查另一个文件夹中是否存在同一图像。 例如,使用伪代码 您建议采用哪种方法?我尝试先使用ajax来实现此目的,然后使用javascript的Image()来实现,但是在