web-dev-qa-db-ja.com

Webpack-Sass Loaderで画像が見つかりません

_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_に入れてから、imageファイルからscssをロードしようとしています。現在、2つのエラーがあります。1）_Chrome's console_から：_Cannot 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>_内にあることがはっきりとわかるので、ドキュメントにあるように、イメージのルートをルートに向けましたが、それでも修正できません。

PDATE： _file-loader_をインストールし、指示に従いましたが、コンソールで次のエラーが表示されます：GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

javascriptcssnode.jswebpacksass-loader
20
Luca Mormile

この問題を解決するために、これをアップロードしました webpack extremly basic configuration 私のプロジェクトを開始するために、この問題を抱えているすべての人に役立つことを願っています。もちろん、提案はすべて歓迎します。

1
Luca Mormile

私が見る限り、あなたは実際にCSSローダー（_"style", "css", "sass", "resolve-url"_）を使用しています（「CSS」の部分は「CSSローダー」です）

Sassファイルでは、編集しているsassファイルからの相対パスを使用して画像にリンクする必要があります。

_styles
 - somefile.scss
 - another.scss
images
 - someImage.jpg
_

somefile.scssで、次のように画像にリンクする必要があります。

background-image: url("../images/someImage.jpg);

（このようなシステムを使用している場合）we​​bpackでこれらのイメージを配布フォルダーに移動する場合は、これらのファイルをコピーするために_file-loader_などが必要になることに注意してください。

6
Wout De Rooms

画像が必要な場所に既にある場合は、 ignore-loader を使用できます。ファイルローダーは、ファイルを出力フォルダーにコピーします。

1
Lukas Winter