Guide on enabling a plugin for Stylus in a Vue 2 project using the webpack template

I am working on a Vue2 project with the Webpack template and utilizing Stylus as a CSS preprocessor. I'm facing difficulties in applying plugins for Stylus like rupture.

I attempted to adjust the options in build/utils.js for the stylus loader by adding the following:

stylus: generateLoaders('stylus', {use: [require('rupture')()]}),
styl: generateLoaders('stylus', {use: [require('rupture')()]})

Furthermore, I tried to import rupture from the tag in App.vue:

@import 'rupture/rupture/index.styl' // also 'rupture/index.styl'

I also experimented with importing it from main.js but have not been successful yet.

Thank you in advance!

javascriptwebpackvuejs2stylus

Answer №1

After exploring different options, I have devised a solution that makes use of the Stylus import feature:

stylus: generateLoaders('stylus', {

  // unfortunately `use` option throws error
  // use: [require('nib')(), require('rupture')()]

  // import to the rescue
  import: [
    '~nib/index.styl',
    '~rupture/rupture/index.styl',
    path.resolve(__dirname, '../src/styles/cfg.styl')
  ]
}),

Please note: If any of the paths specified in the import parameter are incorrect, the server may hang without throwing any errors.

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

Using the return statement to set a value from a callback function in TypeScript

As I retrieve data from an array of class People, each person has an attendance list represented by Observable<any[]>. // Defining the Person class class Person { id: number; name: string; attendance: Observable<any[]>; // Represents ...

javascriptangulartypescript

Is there a way to retrieve the current state of a Material UI component in a React functional component without needing to trigger an event by clicking on

Seeking a way to retrieve current values of Material Ui components without the need to click on any event after page reloads or DOM changes. These values are pulled from a database. My goal is to confirm whether the values have been updated or not by chec ...

javascriptreactjsangularmaterial-ui

Breaking apart a mesh using THREE.js

Can a single THREE.Mesh be divided into multiple meshes? For instance, can a mesh with 2,000,000 polygons be split into 2,000 meshes each with 1,000 polygons? Edit: Realistically, it may not be possible to retain the exact same number of polygons/vertice ...

javascript3dthree.js

Delving into the intricacies of reactivity within datasets

Seeking assistance with a component issue I am facing. I have a situation where I need to pass a prop and assign a variable from my data to that prop, but it needs to be done in a reactive manner. The child component only accepts Booleans so I cannot modif ...

javascriptvue.js

I am encountering errors when running NPM start

After setting up my webpack, I encountered an error in the terminal when attempting to run the code npm start. The specific error message was related to a module not being found. Can someone please assist me with resolving this issue? > <a href="/c ...

javascriptnode.jsreactjsnpmwebpack

Transferring account information to a function call in the near-js-api

I am attempting to utilize the following method in near-js-api for my contract. It requires a Rust AccountId as input. What is the correct procedure to serialize an Account and send it to the contract? Also, are there any specific considerations when inv ...

javascriptnearprotocol

Is there a way to use node.js to retrieve a video in mp4 format?

My goal is to allow users to download a video from my AWS S3 bucket in MP4 format: app.get("/download_video", function(req,res) { filename = "s3.xxx.amazon.com/bucketname/folder/video_example.mp4"; // I'm unsure about the next steps }); Whil ...

javascriptnode.jsexpress

Echo input and refresh on the current page upon submission

I am facing an issue with refreshing the page after submitting a form. I want to refresh the page so that the login attempt can be counted, but currently, the form is displayed without the page being refreshed to add to the count. This is my current code s ...

javascriptphpforms

What is the best way to apply the TableRow style in material-ui / mui to make it similar to TableHead?

Trying to implement TableHead styling on TableRow but encountering a warning: validateDOMNesting(...) cannot be a child of. How can this be fixed without triggering a warning message? CollapisbleTableRow.js import React, { Fragment, useCallback } from &ap ...

javascriptreactjsmaterial-uitablerowtablecell

Tips for ensuring that a server waits until a database connection is successfully established using node.js, MongoDB, and Express

I have a server.js file and a database.js file In the server.js file, I have the following code: const express = require('express'); var db = require('./database'); const app = express(); . . some get/post methods app.listen(3000); . ...

javascriptnode.jsmongodbexpress

Loop through a list of form names using ng-repeat and send each form name to a JavaScript function when clicked

I have multiple forms within an ng-repeat loop, each with a different name. I need to pass the form data when a button inside the form is clicked. However, when I try to call it like this: checkSaveDisable(updateProductSale_{{productIndex}}) it thro ...

javascriptjqueryhtmlangularjsforms

Looking for a way to transfer the value of a variable to a PHP variable using any script or code in PHP prior to submitting a form?

Within this form, the script dynamically updates the module dropdown list based on the selected project from the dropdown box. The value of the module list is captured in a text field with id='mm', and an alert box displays the value after each s ...

javascriptphpjqueryhtmlforms

Is there a way to categorize data and sort it by using an action and reducer in redux?

I have developed a filtering system that allows users to filter data by different categories such as restaurants, bars, cafes, etc. Users can select whether a specific category should be displayed or not, and this information is then sent to the action and ...

javascriptreactjsreact-nativeobjectredux

What is the technique for using JavaScript to implement styling on a <td> within an HTML table?

Can someone help me with applying JavaScript to an entire column in an HTML table? Here is the script I am currently using: I want to insert a line break after each comma in the Message column of the table. Can anyone point out what I'm doing wrong? ...

javascriptjqueryhtmlangularjs

Is it a Mozilla Firefox glitch or something else?

After writing the code, I noticed a bug in Firefox and a small bug in Chrome. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

javascriptjqueryhtmlfirefox

Discrepancy in div height between Chrome/Edge and Firefox browsers

I am currently in the process of designing a straightforward website layout that includes a navigation bar at the top. The main focus is on an image that needs to stretch from the bottom of the navbar to the bottom of the window, filling up the entire scre ...

javascripthtmlcss

Confirm that only the days of the present month are eligible for selection

I have been given the responsibility of validating a date field that is populated when an invoice is created. The date field consists of a text box and three button objects allowing users to select a date from a calendar, input today's date, or remove ...

javascripthtmlvb.net

Exploring the capabilities of Vuetify's v-img with Jest testing

I am struggling to figure out how to test the size of a v-img component within my Vue component. I have attempted to access the surrounding span tag and then target the generated div by Vuetify to inspect the style attribute for proper size setting, but it ...

vue.jsvuejs2jestjsnuxt.jsvuetify.js

What is the best way to convert minutes into both hours and seconds using javascript?

In order to achieve this functionality, I am trying to implement a pop-up text box where the user can choose either h for hours or s for seconds. Once they make their selection, another pop-up will display the answer. However, I am facing issues with gett ...

javascripthtml

What causes the variable to be undefined in the method but not in the constructor in Typescript?

I am currently working on an application using AngularJS 1.4.9 with Typescript. In one of my controllers, I have injected the testManagementService service. The issue I'm facing is that while the testManagementService variable is defined as an object ...

javascriptangularjstypescript