web-dev-qa-db-ja.com

sass-loaderおよびresolve-url-loaderを使用したWebpack 4-イメージパスが見つかりません

ここで最小限の再現可能なセットアップ： https://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue

_resolve-url-loader_を使用してscss url()イメージパスにハッシュ名を追加しようとしていますが、webpack 4で動作するようになるまでにかなり時間がかかります。 _/static/img/**_で、SCSSで次のように参照されます：

_span.arrow {
  background: url(/static/img/audiences.png);
}
_

私のCSSではまったく同じものになります（resolve-url-loaderはそれらを見つけていません）

Webpackを使用して次の構成を実行すると、解決ローダーが正しいurl()とそのパスを見つけていることがわかりますが、デバッグモードではNOT FOUNDと表示されます。

_resolve-url-loader: /static/img/audiences.png
  /Users/usr1/webpack_playground/src
  /Users/usr1/webpack_playground/static/img
  NOT FOUND
_

正しくない出力構成がありますか？私は設定のさまざまな組み合わせを試してみました：

_  loader: 'resolve-url-loader',
  options: {
    debug: true,
    root: path.join(__dirname, './static/img'),
    includeRoot: true,
    absolute: true,
  },
_

私の最終目標は、ファイルローダーが/ distハッシュバージョンに変換することです：

_span.arrow {
  background: url(/static/img/audiences-dhsye47djs82kdhe6.png);
}
_

// Webpackルールの構成

_rules: [
      {
        test: /\.(png|jpg|gif)$/,
        include: [
          path.resolve(__dirname, './static/img'),
        ],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      {
        test: /\.svg$/,
        use: {
          loader: 'svg-inline-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      { test: /\/src\/js\/(?:.*)\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
      {
        test: [/\.scss$/, /\.sass$/],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              debug: true,
              root: './static/img',
              includeRoot: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'compressed',
              sourceMap: true,
              includePaths: [
                './src'
              ],
            },
          },
        ],
      },
]
_
webpacksass-loaderresolve-url-loader
8
jamis0n

必要なのはfile-loader私が望んだことをする。

Css/sass/styleローダーのいずれかが（指定したファイル拡張子に一致する）イメージに遭遇すると、file-loaderは、指定された命名形式で指定された出力ディレクトリにコピーし、ファイル名として使用するsassローダーの名前を返します。

rules: [
  {
    test: /\.(png|jpg|gif|svg)$/,
    exclude: [
      path.resolve(__dirname, './node_modules'),
    ],
    use: {
      loader: 'file-loader',
      options: {
        name: '[path][name]-[hash].[ext]',
        outputPath: '../',
        publicPath: '/dist',
      },
    },
  },
  {
    test: /\.svg$/,
    include: [
      path.resolve(__dirname, './node_modules'),
    ],
    use: {
      loader: 'svg-inline-loader',
      options: {
        name: '[name]-[hash].[ext]',
      },
    },
  },
  { test: /\/src\/js\/(?:.*)\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
  {
    test: [/\.scss$/, /\.sass$/],
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          root: path.resolve(__dirname),
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            autoprefixer({
              'browsers': ['last 2 versions', 'ie >= 10'],
            }),
          ],
          sourceMap: true,
        },
      },
      {
        loader: 'sass-loader',
        options: {
          outputStyle: 'compressed',
          sourceMap: true,
          includePaths: [
            './src/scss',
          ],
        },
      },
    ],
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: {
          root: path.resolve(__dirname),
        },
      },
    ],
  },
  {
    test: [
      /\/bundles\/(?:.*)\.js$/,
    ],
    use: {
      loader: 'babel-loader',
    },
  },
];
4
jamis0n

同じ問題がありました。 必要url-loaderは、Webpack 4で画像を適切にロードします。このセットアップは、私にとってはうまくいきました。

rules: [
    {
        test: /\.(png|jpg)$/,
        loader: "url-loader",
    }, {        
        test: /\.(scss|css)$/,
        use: [
            "style-loader",
            "css-loader",
            "sass-loader",
        ]
    }
]
0
skepticscript

実際には、resolve-url-loaderがまだ必要ですsometimes...内部にインポートされたファイルからurl（）呼び出しを解決できるかどうかによって異なりますSassコンパイル。これがないと、この場合URLが破損します。

ただし、マルチファイルscssビルドを使用しない場合（たとえば、各コンポーネントにローカルのscssファイルが1つしかない場合、共有ライブラリscssコードまたは何らかのパーシャルを呼び出さない場合）-resolve-url-は必要ありませんローダ。

もちろん、url-loader（インライン機能を備えたfile-loderをラップする）またはfile-loader（アセットをdistフォルダーに直接コピーするため）がまだ必要です。

resolve-url-loaderは、sassによって発行されたソースマップから元のファイルを再加工することで機能し、sart-loaderは、Dart-sassの実装で作業するときにソースマップに問題があります。この場合、ソースマップソースは誤ってファイル名の代わりに標準入力になります issue 671 を参照してください PR 681

これは今日（2019年7月）の時点で未リリースの修正であり、唯一のオプションはnode-sassを使用するか、未リリースのsass-loaderを使用することです

0
Nadav SInai