Dva: lessで参照されている画像のパスの問題

importとrequireはどちらも問題ありません。

@bjwulin .lessファイルの下でインポートまたは要求する方法は？

.lessファイルの下に背景画像を紹介しようとしました。

.list {
  width: 100%;
  margin-bottom: .6rem;
  background: url('./bg.png') center no-repeat;
}

npm startを実行すると、コンソールから次のエラーが報告されます。

ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./~/less-loader?{"sourceMap":true,"modifyVars":{}}!./src/routes/LoginPage.less
    Module not found: Error: Cannot resolve module 'bg.png' in /Users/mcbird/workspace/cedar-mobile/src/routes
     @ ./~/css-loader?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./~/less-loader?{"sourceMap":true,"modifyVars":{}}!./src/routes/LoginPage.less 6:304-321

ドキュメントの構造は次のとおりです。

私のwebpack.config.jsファイルは次のとおりです。

const fs = require('fs');
const path = require('path');

module.exports = function(webpackConfig, env) {
  webpackConfig.babel.plugins.push('transform-runtime');

  // Support hmr
  if (env === 'development') {
    webpackConfig.devtool = '#inline-source-map';
    webpackConfig.babel.plugins.push(['dva-hmr', {
      entries: [
        './src/index.js',
      ],
    }]);
  } else {
    webpackConfig.babel.plugins.push('dev-expression');
  }

  // 引入 antd
  webpackConfig.babel.plugins.push(['import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }]);

  // Support CSS Modules
  // Parse all less files as css module.
  webpackConfig.module.loaders.forEach(function(loader, index) {
    if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
      loader.include = /node_modules/;
      loader.test = /\.less$/;
    }
    if (loader.test.toString() === '/\\.module\\.less$/') {
      loader.exclude = /node_modules/;
      loader.test = /\.less$/;
    }
    if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.css$') > -1) {
      loader.include = /node_modules/;
      loader.test = /\.css$/;
    }
    if (loader.test.toString() === '/\\.module\\.css$/') {
      loader.exclude = /node_modules/;
      loader.test = /\.css$/;
    }
  });

  return webpackConfig;
};

写真をsrc/assets/下に別々に置いても大丈夫だとわかりました

このとき、 LoginPage.lessの画像のURLは相対パスを直接書き込みます

.list {
  width: 100%;
  margin-bottom: .6rem;
  background: url("../assets/bg.png");
}

https://github.com/dvajs/dva/issues/96#issuecomment -247935310
これと同じ問題のようです。

さまざまなデバッグの結果、 *.lessファイル内のイメージパスをルートディレクトリから見つける必要があることがわかりました。下の写真：

私たちの通常の習慣によれば、通常background: url("./bg.png");直接

試してみましたが、2つの解決策があります。

1. 使用しないでください.less使用して、 .css
2. background: ~"url(./bg.png)" no-repeatなどの〜プレフィックスをURLに追加します

文字列補間を使用して、以下を導入できます。
1. @imgUrl ： "../ star.jpg";ルートディレクトリから画像のパスを書き込みます。画像とそれ以下のファイルの場合、cssファイルはディレクトリにあります。直接@ I'mUrl： " star.jpg ";
2.background：url（ "@ {imgUrl}"）;文字列補間メソッドを使用して導入し、静止画像を導入できるようにします。また、〜 ""を使用することもできます。引用符で囲まれた背景は、コンパイルを回避するためです：〜 "url（ ' ../star .jpg '） ";

本当に使いにくいです

background: ~"url('../star.jpg')"この方法は私のプロジェクトで使用できますが、他の人は使用できません

背景：〜 "url（ '../ star.jpg'）"が利用可能

背景などの〜プレフィックスをURLに追加します：〜 "url（./ bg.png）"これは利用可能です