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/ अंतर्गत रखना ठीक है

इस समय, 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"); लिखें, लेकिन यहां आपको मूल निर्देशिका में वापस जाना होगा और फिर नीचे देखना होगा।

कोशिश की, दो समाधान हैं:

1. का प्रयोग न करें .less , का उपयोग .css
2. url में ~ उपसर्ग जोड़ें, जैसे background: ~"url(./bg.png)" no-repeat

परिचय देने के लिए आप स्ट्रिंग इंटरपोलेशन का उपयोग कर सकते हैं:
1. @imgUrl :"../star.jpg"; रूट डायरेक्टरी से पिक्चर का पाथ लिखें, अगर यह पिक्चर और कम फाइल है, तो css फाइल डायरेक्ट्री में है, सीधे @ I'mUrl: " स्टार.जेपीजी";
2.बैकग्राउंड: url("@{imgUrl}"); शुरू करने के लिए स्ट्रिंग इंटरपोलेशन विधि का उपयोग करें ताकि आप स्थिर छवियों को पेश कर सकें, आप ~"" का भी उपयोग कर सकते हैं उद्धरण चिह्नों में पृष्ठभूमि संकलन से बचने के लिए है: ~"url(' ../स्टार .jpg')";

इसका उपयोग करना वास्तव में कठिन है

background: ~"url('../star.jpg')" इस तरह से मेरे प्रोजेक्ट में इस्तेमाल किया जा सकता है, अन्य नहीं कर सकते

पृष्ठभूमि: ~"url('../star.jpg')" उपलब्ध है

url में ~ उपसर्ग जोड़ें, जैसे कि पृष्ठभूमि: ~"url(./bg.png)" यह उपलब्ध है