My npm package has the following structure:
--src
--styles
-image.png
-style.scss
In the style.scss file, the image is referenced like this:
.test {
background-image: url(./image.png);
}
The issue arises when consuming the package, as the CSS is looking for the image from the root directory instead of relative to the package itself. How can we resolve this problem?
This is how I am importing the package:
@import "mypackage/src/styles/style";
Dealing with the same problem, I struggled to find a sleek solution. Eventually, I ended up resolving it by manually copying the referenced files to the build directory. To accomplish this task, I utilized the "copy-webpack-plugin" plugin from here.
If you're facing a similar challenge, take a look at this related issue as well: Bundle assets from npm package with Webpack
Lately, I encountered this issue and discovered that the information on StackOverflow was outdated. This is not surprising considering how rapidly things evolve in the realm of NPM & Web Development.
The good news is that Webpack 5 has resolved this problem straight out of the box. All you need to do is update the webpack.config.js file.
You can find more details about this in webpack's documentation here: https://webpack.js.org/guides/asset-modules/
The solution involves Base64 encoding your static assets and inlining them into your CSS/JavaScript files.
When preparing your source code for distribution on NPM, if your CSS file references static images like this:
background-image: url(./image.png)style-loader and css-loader packages.
In my case, adding the following lines to my webpack.config.js solved the issue and enabled me to export a single index.js file along with my package, which I could import into other projects:
The crucial line to pay attention to here is type: asset/inline when dealing with images.
webpack.config.js
...
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpg|gif)$/i,
type: "asset/inline",
},
],
},
...
...
To get started, simply install the file loader tool by running this command:
npm install file-loader --save-dev
Next, make sure to include the following line in the module section of your configuration file:
module: {
rules: [{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}]
}
I keep encountering an error message every time I attempt to install node-mapnik on my Windows 8.1 x64 computer. npm ERR! Windows_NT 6.3.9600 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\&bs ...
I'm struggling to understand why my tslint insists on having a trailing comma at the end of the last line in the objects. Is there a way to configure the ignore rule for the last line of objects? Appreciate any help! For example: settings = { ...
Whenever I try to log in with the wrong password and email, no error message is displayed. Instead, it simply logs me in and takes me to the main page. Can someone please assist me in implementing an error message display for incorrect login details? imp ...
Something seems off. The sorting doesn't work as expected. Check out the JavaScript code below: function sortDescending(a, b) { var date1 = $(a).data('date'); var date2 = $(b).data('date'); return date1 > date2; } ...
In my quest to improve logging within my application, I am in the process of transitioning from using controllers to moving all business logic into services. However, I am unsure of how to effectively share logger context between the service and the corr ...
UPDATE: I initially used filter(), which was incorrect. I have since switched to find(), but unfortunately the issue persists. This snippet of code functions properly for me: $('#content') .replaceWith($( '<div> <d ...
I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...
hi guys i have an issue on ajax. where ajax can't work to take the data of second rows. This's code in model function getdtbarang($barcode = FALSE) { if ($barcode === FALSE) { $query = $this->db1->get(&a ...
Looking for a way to upload files to Google Drive using NodeJS as the backend? Utilizing Google Drive API v3, you can retrieve the file ID and type in the response after successfully uploading a file. drive.files.create({ resource: { name: ...
Currently, I am in the process of developing a static site using a combination of HTML, CSS, and JS along with nodeJS and express for server-side functionality... One challenge I am facing is setting up routes to display pages like /about instead of acces ...
I am currently working on a Vue application that was created using Vue-cli. Vue version: 2.6.11 vue-router version: 3.2.0 Link for Reproduction https://github.com/keyhangholami/dom-based-open-redirect Instructions to replicate To reproduce the i ...
I am currently experimenting with JavaScript to dynamically add new content upon clicking a button. Although I have successfully implemented the JavaScript code to work when the button is clicked once, I would like it to produce a new 'hello world&ap ...
I am attempting to transfer a downloaded file from a web browser to a Windows application (such as Outlook or a printer queue) by dragging and dropping. While I can successfully drop the file onto the desktop or any other file explorer location, I face iss ...
I have successfully deployed a Meteor application on my Ubuntu server using Meteor Up (MUP) and everything is working well. However, when attempting to deploy a second app on the same server, I encounter issues with connecting to MongoDB. The error message ...
I am facing an issue with a JavaScript variable I have, which points to a specific DOM element that I want to display somewhere else within the DOM structure. Here is how it is defined: var salesRep = $("ul.map").attr("id","1"); My goal is to pass this v ...
I defined a custom property in the :root selector as shown below, but for some reason my color is not rendering correctly. Can someone please help me identify what I am doing wrong? :root { --color-primary: var(--color-primary, #ffc107); } body { ...
It seems that the filter: opacity property is not functioning as expected in IE8. Despite having used it successfully before, I am currently facing issues with its implementation. Strangely enough, Firebug does not display the filter rule at all; only norm ...
Currently, I am in the midst of developing a React component library and one of my components contains a function that I want to export. The purpose of the addParticle function is to enable users of the library to dynamically insert particles into a cont ...
https://i.stack.imgur.com/VOLDT.png I've been working on a nextjs redux project and I keep running into this error whenever I refresh my page. Despite searching for a solution, I haven't been able to resolve it. The official next js blog suggest ...
Looking to customize the appearance of the up/down spin buttons in MUI TextField. Desiring white arrows and a black surrounding area that's slightly larger, akin to this: I'm aware that adjustments need to be made within input::-webkit-outer-sp ...