Webpack - sass 加载器找不到图像 [英] Webpack - sass loader cannot find images
问题描述
sass loader
文档说:如果您只是生成 CSS 而不将其传递给 css-loader,则它必须相对于您的 Web 根目录"
.所以我照它说的做了,我在我的 project root
中有我的 index.html
,然后我试图从我的scss
文件.现在我有 2 个错误:1)来自 Chrome 的控制台
:找不到模块./img/header.jpg"
.2)从我的终端
:
The sass loader
doc says: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root"
.
So i did as it tells, I have my index.html
in my project root
, then I'm trying to load an image
from my scss
file.
Now I have 2 errors: 1) from Chrome's console
: Cannot find module "./img/header.jpg"
. 2) from my 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-DevelopmentReactPortfoliopubliccss
@ ./~/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>
中,所以我已经将我的图像的路径指向我的根目录,如文档所述,但仍然不能修复它.
If I see my code, I can clearly see that my css lives inside <head>
so I've pointed my image's path to my root, as documentation says, but still can't fix it.
更新:我已经安装了 file-loader
并按照说明操作,现在我在控制台中收到此错误:GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119
UPDATE:
I've installed file-loader
and followed the instructions, now I get this error in console: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119
推荐答案
为了解决这个问题我上传了这个 webpack 极其基础的配置 开始我的项目,我希望它可以帮助所有遇到这个问题的人.当然欢迎大家提出建议.
To solve this problem I've uploaded this webpack extremly basic configuration to start my projects, I hope it can help everyone who had this problem. Suggestions are all welcome of course.
这篇关于Webpack - sass 加载器找不到图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!