import和require都可以。
@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;
};
我发现把图片单独放在 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");
就可以了, 但是这里必须先回到根目录再往下找才行。
试了下,有两个解决方案:
.less
,用 .css
background: ~"url(./bg.png)" no-repeat
可以使用字符串插值引入:
1.@imgUrl:"../star.jpg"; 将图片路径从根目录下写,若是图片与less文件,css文件在一个目录下,直接@I'mUrl:“star.jpg”;
2.background: url("@{imgUrl}"); 使用字符串的插值方法引入
这样就可以引入静态图片
也可以使用 ~“” 引号内是避免编译的 background: ~"url('../star.jpg')";
真难用啊
background: ~"url('../star.jpg')"
这种方式在我的项目可以使用,其他的不行
background: ~"url('../star.jpg')" 可用
给 url 加 ~ 前缀,比如 background: ~"url(./bg.png)" 这个是可用的
Most helpful comment
试了下,有两个解决方案:
.less
,用.css
background: ~"url(./bg.png)" no-repeat