less 中引用图片的路径问题

[semicoder]

No description provided.

[bjwulin]

import和require都可以。

[CodingMonkeyzh]

@bjwulin 在 .less 文件下怎么 import 或者 require?

我尝试在 .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;
};

[CodingMonkeyzh]

我发现把图片单独放在 src/assets/ 下是可以的

此时， LoginPage.less 中图片 url 直接写相对路径

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

[sorrycc]

#96 (comment)
好像和这个同一个问题。

[CodingMonkeyzh]

经过各种调试，发现 *.less 文件中的图片路径必须以根目录为起点去找。下面这张图：

按照我们平时的习惯，一般直接写background: url("./bg.png");就可以了， 但是这里必须先回到根目录再往下找才行。

[sorrycc]

试了下，有两个解决方案：

1. 不用 .less，用 .css
2. 给 url 加 ~ 前缀，比如 background: ~"url(./bg.png)" no-repeat

[xyoscer]

可以使用字符串插值引入：
1.@imgurl:"../star.jpg"; 将图片路径从根目录下写，若是图片与less文件，css文件在一个目录下，直接@i'mUrl：“star.jpg”；
2.background: url("@{imgUrl}"); 使用字符串的插值方法引入
这样就可以引入静态图片
也可以使用 ~“” 引号内是避免编译的 background: ~"url('../star.jpg')";

[daffy6537]

真难用啊

[Xing-He]

background: ~"url('../star.jpg')" 这种方式在我的项目可以使用，其他的不行

[Barretemer]

background: ~"url('../star.jpg')" 可用

[binuy]

给 url 加 ~ 前缀，比如 background: ~"url(./bg.png)" 这个是可用的