Webpack alias is not resolved in .less file.
wenyang9319 opened this issue · comments
- Operating System: Mac
- Node Version: v10.16.3
- NPM Version: 6.13.4
- webpack Version: ^4.42.1
- less-loader Version: ^5.0.0
- less: ^3.11.1
Expected Behavior
Webpack alias to be resolved in url
request.
In my context will be
instead of requesting ./Assets/images/land/background.jpg
should something like localhost:8000/#/src/assets/images/land/background.jpg
Actual Behavior
How image is requested:
background-image: url(Assets/images/land/background.jpg);
Error as shown below:
ERROR in ./src/library/components/Town/Town.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??ref--6-2!./src/library/components/Town/Town.less) Module not found: Error: Can't resolve './Assets/images/land/background.jpg' in '/Users/wenyang/Work/react/dudu-mars/src/library/components/Town'
Code
// webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: [
{
loader: "style-loader", // creates style nodes from JS strings
},
{
loader: "css-loader", // translates CSS into CommonJS
},
{
loader: "less-loader", // compiles Less to CSS
},
],
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
},
],
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: "file-loader",
options: {
esModule: false,
},
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html",
}),
],
resolve: {
extensions: [
".web.js",
".web.jsx",
".web.ts",
".web.tsx",
".js",
".json",
".jsx",
".ts",
".tsx",
],
alias: {
Library: path.resolve(__dirname, "./src/library/"),
Assets: path.resolve(__dirname, "./src/assets/"),
Builder: path.resolve(__dirname, "./src/builder/"),
Utils: path.resolve(__dirname, "./src/utils/"),
},
},
};
// package.json
{
"name": "dudu-mars",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"dva": "^2.4.1",
"lodash": "^4.17.15",
"phaser": "^3.22.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-json-editor-ajrm": "^2.5.9",
"react-pose": "^4.0.10",
"react-responsive-spritesheet": "^2.3.9",
"react-sizeme": "^2.6.12"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.2",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.2.0",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"style-loader": "^1.1.4",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
Extra
I was migrated from https://github.com/sorrycc/roadhog to webpack.
background-image: url(Assets/images/land/background.jpg);
was resolved correctly.
Same problem - webpack-contrib/css-loader#914
While you can use tilde
background-image: url(~Assets/images/land/background.jpg);