Dva: Проблема пути с изображениями, на которые ссылается меньше

И 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/

В это время URL-адрес изображения в LoginPage.less записывает относительный путь напрямую

.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"); напрямую, но здесь вы должны вернуться в корневой каталог и затем посмотреть вниз.

Пробовал, есть два решения:

1. Не используйте .less , используйте .css
2. Добавьте к URL-адресу префикс ~, например background: ~"url(./bg.png)" no-repeat

Вы можете использовать строковую интерполяцию, чтобы ввести:
1. @imgUrl : "../ star.jpg"; Запишите путь к изображению из корневого каталога, если это изображение и файл less, файл css находится в каталоге, непосредственно @ I'mUrl: " star.jpg ";
2.background: url ("@ {imgUrl}"); Используйте метод интерполяции строк, чтобы ввести статические изображения, вы также можете использовать ~ "" Фон в кавычках предназначен для предотвращения компиляции: ~ "url (' ../star .jpg ') ";

Действительно сложно использовать

background: ~"url('../star.jpg')" Этот способ можно использовать в моем проекте, другие не могут

фон: ~ "url ('../ star.jpg')" доступен

Добавьте префикс ~ к URL-адресу, например background: ~ "url (./ bg.png)", это доступно