質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • CSS

    7740questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • webpack

    334questions

webpackでurl-loaderを用いて画像ファイルのバンドルができない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 695

yamanaka-aiz

score 35

経緯

webpackには、CSSファイル内の画像パスをbase64に変換して挿入してくれる「url-loader」というのがあると知って、それを利用しようとしたのですがうまくいきません。

ビルド時には特にエラーは出ておらず、いろいろ試したのですが、一向に変換してくれません。
お手数ですが、ご助言いただけると幸いです。

環境

  • Windows 10 Home
  • Node.js v11.7.0
  • npm v6.5.0
  • webpack v4.29.0

package.json

{
  "name": "aaaa",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.4.6",
    "css-loader": "^2.1.0",
    "cssnano": "^4.1.8",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

webpack.config.js

const MODE = 'development';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const enabledSourceMap = (MODE === 'development');
const devtool_value = enabledSourceMap ? "inline-source-map" : "";

module.exports = {

  mode: MODE,

  devtool: devtool_value,

  module: {
    rules: [
      {
        test: /\.scss/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: enabledSourceMap,
              importLoaders: 2
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: enabledSourceMap,
              plugins: [
                require('autoprefixer')({
                  browsers: [
                    "last 2 version",
                    "> 0.2%",
                  ],
                }),
                require('cssnano')(),
              ]
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: enabledSourceMap,
            }
          },
        ],
      },
      {
        test: /\.(gif|png|jpg|eot|wof|woff|woff2|ttf|svg)$/,
        loader: 'url-loader',
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.min.css',
    })
  ],
};

style.min.css

.icon{background-image:url(icon.png)}

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvc2Nzcy9zdHlsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLE1BQ0UsOEJBQStCLEMiLCJmaWxlIjoic3R5bGUubWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBjaGFyc2V0IFwiVVRGLThcIjtcclxuXHJcbi5pY29uIHtcclxuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoaWNvbi5wbmcpO1xyXG59XHJcbiJdLCJzb3VyY2VSb290IjoiIn0=*/

コマンドプロンプト内の表示

Hash: 9882774b60180a36fa72
Version: webpack 4.29.0
Time: 879ms
Built at: 2019-01-25 16:35:12
        Asset       Size  Chunks             Chunk Names
      main.js   9.39 KiB    main  [emitted]  main
style.min.css  437 bytes    main  [emitted]  main
Entrypoint main = style.min.css main.js
[./src/index.js] 29 bytes {main} [built]
[./src/scss/style.scss] 39 bytes {main} [built]
    + 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--4-1!node_modules/postcss-loader/src/index.js??ref--4-2!node_modules/sass-loader/lib/loader.js??ref--4-3!src/scss/style.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/scss/style.scss] ./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/src??ref--4-2!./node_modules/sass-loader/lib/loader.js??ref--4-3!./src/scss/style.scss 462 bytes {mini-css-extract-plugin} [built]
        + 1 hidden module

試したこと

  • パッケージの再インストール
  • mini-css-extract-plugin,postcss-loader,sass-loader使わずビルド
  • あらゆる階層にicon.png設置
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

css-loaderのオプションの
url: false
が原因でした
url: true
で問題なく動作しました

不覚・・・・

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • CSS

    7740questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • webpack

    334questions