Dva: less에서 참조 된 사진의 경로 문제

가져 오기와 요구 모두 괜찮습니다.

@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 : " star.jpg ";
2.background : url ( "@ {imgUrl}"); 문자열 보간 방법을 사용하여 정적 이미지를 도입 할 수 있도록 소개하고 ~ ""를 사용할 수도 있습니다. 인용 부호 안의 배경은 컴파일을 피하는 것입니다. ~ "url ( ' ../star .jpg ') ";

사용하기 정말 어렵습니다

background: ~"url('../star.jpg')" 이 방법은 내 프로젝트에서 사용할 수 있지만 다른 사람은 사용할 수 없습니다.

배경 : ~ "url ( '../ star.jpg')"사용 가능

URL에 ~ 접두사를 추가합니다 (예 : background : ~ "url (./ bg.png)"사용 가능).