Use the asset module instead of the file-loader when adding additional loaders in the chain

My webpack configuration includes the following module for processing SCSS files:

{
  test: /atffonts\.scss$/,
  use: [
        {
          loader: 'file-loader',
          options: {
            name: 'style/[name].css',
          },
        },
        'extract-loader',
        'css-loader',
        'sass-loader',
  ],
}

The goal of this code is to transform an SCSS file into valid CSS.

I am in the process of upgrading to Webpack v5 and exploring the use of asset modules. While I can still use the deprecated file-loader, my aim is to move away from reliance on outdated features.

I have refactored the code as follows:

 {
  test: /atffonts\.scss$/,
  type: 'asset/resource',
  generator: {
    filename: 'style/[name].css',
  },

  use: [
    'extract-loader',
    'css-loader',
    'sass-loader',
  ],
}

This revised code successfully generates a file, but the resulting content is not valid CSS. Instead, it produces:


// Content generation script example 
// This part should be properly generated CSS 

var content = require("!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/style-loader/index.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./atffonts.scss");

// Continue your processing here...

I am uncertain if my approach aligns with the asset module concept. Should I revisit my implementation or continue using the deprecated file-loader temporarily?

Answer №1

I recently implemented something similar using the MiniCssExtractPlugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
use : [
  MiniCssExtractPlugin.loader,
  "css-loader",
  "sass-loader",
],

Just a friendly reminder: make sure to install the loader using npm/yarn

Hoping this solution works as well for you as it did for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript to resize images before uploading without displaying a preview

I'm searching for a way to prevent the need to upload large or heavy image files. I believe utilizing the HTML5 FileAPI library is the best solution for this task. All necessary features have been implemented (upload, re-ordering, etc.), so now I ju ...

Utilizing a function upon page initialization in VueX

I am currently learning Vue with Vuex and I have created a method called 'llamarJson' which is used to retrieve JSON data. However, I am facing difficulties in using this method when the page loads. I have tried various approaches but have not be ...

Retrieve all instances of a key-value pair within an object that share the same key

Here is some JSON data: [{"name":"David","text":"Hi"},{"name":"Test_user","text":"test"},{"name":"David","text":"another text"}] I am l ...

Choose a specific option from the dropdown menu using a URL parameter

After reviewing this code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // <![CDATA[ $(document).ready(function() { // Parse your query parameters here, and assi ...

The signature provided by the pusher is invalid: The expected HMAC SHA256 in hexadecimal digest is

The HTML file contains JavaScript code that calls the server for authentication. The code snippet from the HTML file is as follows: <html> <script> <head> var options = { authEndpoint: "api/pusher.json?socket_id=9900&channel_name ...

What is the best way to implement the <b-pagination-nav> component in Bootstrap Vue?

I'm eager to begin using the featured in this guide. However, I'm struggling to figure out how to incorporate the tag into my website. The tutorial's instructions are unclear and as a newcomer, I'm finding it difficult to make it func ...

Interacting between various components in separate files using React.js

Creating a page using React involves two Components with different functions. The first component, ProfileFill, is responsible for capturing form data. On the other hand, the second component, ProfileFillPercent, which resides in a separate file, calculate ...

Activate the front camera on an Android device using HTML5 or JavaScript

I'm currently working on a web app that needs to access the front camera of Android phones running version 4.0 or higher. After taking a picture, the app should then upload the captured image to my own server. Is there a way to launch the front camer ...

Using a single function to generate multiple instances of a table in JavaScript

My journey to learning javascript led me to create a simple game called circle of crosses. Below is the code I used: (JS) // JavaScript code here (HTML) <!DOCTYPE html> <html> // HTML code here </html> I came across an issue whil ...

The components declared in the index file are rendered on every route throughout the React application

I'm a beginner with React and I'm using react-router version 6.0.2. My issue is that I created a component for the router and then called this component in the index file. However, when I add another component to the index file, it gets rendered ...

Verifying that utilizing a factory is the most effective method for developing a versatile click count listener

In my quest to enhance the functionality of click events, I have devised a click count factory. This factory creates a clickCountObj to keep track of the number of clicks and implements a new function for capturing click events on a specified element and r ...

Is there a way to construct a Javascript function, without relying on JQuery, for fetching JSON objects from varying

I have been searching for a non-JQuery AJAX function that can fetch data from a URL and return it as a JSON object. For example, let's say I want to display information about Users from one JSON located at URL1 and also include information about Post ...

Unable to designate decimal value as the default in DropdownListFor in ASP.NET Core when utilizing JavaScript

Everything appears to be functioning properly, except when dealing with decimal values in the following code snippet: $('select#listspec_0__qty option[value = 105.3]').attr("selected", true); ...

What is the best way to send information back to an AJAX script that has made a

Can someone explain to me how the response section of an AJAX call is processed and formatted using plain, native JavaScript (no jQuery or other frameworks)? I have searched extensively but have not found a clear answer. I am looking for an example that ...

Gaining access to the isolated scope of a sibling through the same Angular directive led to a valuable discovery

I am currently working on an angularjs directive that creates a multi-select dropdown with a complex template. The directives have isolated scopes and there is a variable called open in the dropdown that toggles its visibility based on clicks. Currently, t ...

Solving the image path issue in a Vue Component using webpack (inside Vuepress)

Incorporating the most recent Vuepress version (1.0.0-alpha.46), I have set up the documentation off the root directory with an assets folder for image storage. Referencing these images in markdown poses no issues. For example: ![ ](../assets/foobar.jpg) ...

Choose the AuthGuard category in real-time

My application intends to employ two distinct authentication strategies - one for users accessing via a browser and another for the public API. A specific header will be set for browser users, allowing my app to determine the appropriate auth strategy base ...

Utilizing Lazy Loading Modules within an Angular 2 (v5) App

I'm struggling to implement lazy loading in my Angular 2 (version 5.1.3) project. While following Todd Motto's guide on Lazy Loading Code Splitting, I am hitting a roadblock in getting it to function correctly. My app consists of multiple modul ...

VS code showing live server as installed but failing to function properly

After installing the live server extension, I noticed that my browser is not updating when I save my HTML or other files. What could be causing this issue? ...

Leveraging summernote in meteor with Discover Meteor tutorial

Recently, I've been delving into the world of Discover Meteor and encountering some challenges along the way. My current hurdle involves integrating content entered in summernote into mongo, but it seems to be more complicated than expected. The fil ...