L'importation et la demande sont très bien.
@bjwulin Comment importer ou demander sous le fichier .less
?
J'ai essayé d'introduire l'image d'arrière-plan sous le fichier .less
.
.list {
width: 100%;
margin-bottom: .6rem;
background: url('./bg.png') center no-repeat;
}
Lorsque j'exécute npm start
, la console signale une erreur:
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
La structure du document est la suivante:
Mon fichier webpack.config.js
est le suivant:
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;
};
J'ai trouvé que c'était correct de mettre l'image séparément sous src/assets/
À ce stade, l'url de l'image dans LoginPage.less
écrit directement le chemin relatif
.list {
width: 100%;
margin-bottom: .6rem;
background: url("../assets/bg.png");
}
https://github.com/dvajs/dva/issues/96#issuecomment -247935310
Cela semble être le même problème que celui-ci.
Après divers débogages, il s'avère que le chemin de l'image dans le fichier *.less
doit être trouvé à partir du répertoire racine . L'image ci-dessous:
Selon nos habitudes habituelles, il suffit généralement d'écrire directement background: url("./bg.png");
, mais ici vous devez retourner au répertoire racine puis regarder vers le bas.
Essayé, il existe deux solutions:
.less
, utilisez .css
background: ~"url(./bg.png)" no-repeat
Vous pouvez utiliser l'interpolation de chaîne pour introduire:
1. @imgUrl : "../ star.jpg"; Ecrivez le chemin de l'image depuis le répertoire racine, si c'est une image et un fichier less, le fichier css est dans un répertoire, directement @ I'mUrl: " star.jpg ";
2.background: url ("@ {imgUrl}"); Utilisez la méthode d'interpolation de chaîne à introduire afin que vous puissiez introduire des images statiques, vous pouvez également utiliser ~ "" L'arrière-plan entre guillemets est d'éviter la compilation: ~ "url (' ../star .jpg ') ";
C'est vraiment difficile à utiliser
background: ~"url('../star.jpg')"
Cette façon peut être utilisée dans mon projet, les autres ne peuvent pas
background: ~ "url ('../ star.jpg')" disponible
Ajoutez le préfixe ~ à l'url, tel que l'arrière-plan: ~ "url (./ bg.png)" est disponible
Commentaire le plus utile
Essayé, il existe deux solutions:
.less
, utilisez.css
background: ~"url(./bg.png)" no-repeat