Dva: مشكلة المسار مع الصور المشار إليها في أقل

كل من الاستيراد والمطلب جيد.

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" ؛ اكتب مسار الصورة من الدليل الجذر ، إذا كانت صورة وملف أقل ، فإن ملف css موجود في دليل ، مباشرة @ I'mUrl: " star.jpg "؛
2. background: url ("@ {imgUrl}") ؛ استخدم طريقة الاستيفاء التسلسلي لتقديمها حتى تتمكن من إدخال صور ثابتة ، ويمكنك أيضًا استخدام ~ "" الخلفية بين علامات التنصيص لتجنب التجميع: ~ "url (' ../star .jpg ') "؛

من الصعب حقًا استخدامه

background: ~"url('../star.jpg')" بهذه الطريقة يمكن استخدامها في مشروعي ، لا يمكن للآخرين استخدامها

الخلفية: ~ "url ('../ star.jpg')" متاح

أضف ~ بادئة إلى عنوان url ، مثل الخلفية: ~ "url (./ bg.png)" هذا متاح