Importing CSS with Node Sass using npm

Instead of inlining css within sass, I attempted to utilize the npm package Node Sass CSS importer. Unfortunately, I am struggling to get it to function properly.

I typically use npm as my build tool:

 "build:css": "node-sass some_path/style.scss some_path/css/glamos.min.css",

What changes do I need to make? My initial adjustment was something like:

"build:css": "node-sass some_path/style.scss some_path/css/glamos.min.css  --importer node-sass-css-importer",

After running npm run build:css, I encountered the following error message:

Error: Cannot find module 'path_to_repo/CssImporter'

How should I reconfigure this setup?

cssnode.jsnpmsass

Answer №1

Latest Update

The deprecations have been removed, as confirmed by the release notes of the most recent version 

Removes noisy deprecation warning for @import'ing .css files
.

To ensure node-sass inlines correctly, make sure to call it like this @import "./normalize"; rather than @import "./normalize.css"; without the extension. This was mentioned in detail on this issue thread: Discuss here for clarification.

Here are the steps I followed to successfully implement this:

npm install node-sass --save-dev

Add the following script to your package:

"build:css": "node-sass src/style.scss dist/glamos.min.css"

Example usage of style.scss:

@import "./normalize";

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Finally, here is the resulting output in glamos.min.css:

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */

/* Various style rules...*/

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

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

Google App Engine crash - npm encountering issues with make and throwing INVALID_ARGUMENT error

Encountering a strange error while trying to deploy on google appengine. Have tried various troubleshooting steps like removing yarn files, package lock files, and running npm install again, but still stuck. Would appreciate another set of eyes to take a l ...

debugginggoogle-app-enginenpmgyp

What is the best way to horizontally align an element within a Material UI Grid item?

How do I align elements in the center of a Material UI Grid item? Check out this code snippet from my React project: <Grid container> <Grid item xs={4}> // Other content goes here </Grid> <Grid item xs={4}> // How can ...

cssreactjsmaterial-ui

Ways to utilize Pub / Sub Notifications for Cloud Storage

In order to utilize Pub/Sub Notifications for Cloud Storage, I am working with storage files on Firebase and need to perform various processes. These processes result in additional data being stored in different fields on Firebase. However, there are insta ...

node.jsreactjsfirebasegoogle-cloud-platformgoogle-cloud-pubsub

"Gone in a Scroll: Div vanishes as page moves

Fiddle: http://jsfiddle.net/ud6hejm6/ I was tasked with creating a website for a video game tournament. By opening the fiddle link provided, you can preview the page layout. A central div is featured in the design: <div class="middle teko" id="mezzo"& ...

jqueryhtmlcss

The customized icon in the Material UI Select component lacks proper vertical centering

Check out this demo link where the dropdown icon is currently not vertically centered. It appears to have extra top padding due to the class "tlm-dropdown-icon", causing it to be off-center. I've tried inspecting the element but couldn' ...

cssreactjsmaterial-ui

Tips for verifying user authentication with OAuth2 in a React and Express Node app

Despite looking at various resources on this subject, I'm still struggling to find a solution to my specific issue. I've been utilizing the Strava API, which operates on OAuth 2.0. The process involves: Clicking the connect button Redirecting t ...

node.jsreactjsexpressoauth-2.0

The transformation of my HTTP Express server into an HTTPS server with Heroku

Issue I set up an express server using app.listen like this: app.listen(config.PORT, _ => { console.log(`Server started at port # ${config.PORT}`)}) The server was deployed on Heroku. Surprisingly, it is now functioning with https. You can view it h ...

node.jsexpresshttpherokuhttps

Tips for creating consistent background text size

i need assistance creating a box for text that looks like this https://i.stack.imgur.com/JOC0r.png my CSS code for the box is as follows: .bg-text-kol2 { background-color: #ffffff; background-size: 10px 10px; border-top-left-radius: 10px; border ...

cssswiper.js

Setting up React Bootstrap in a React project. Error: Object not detected

After installing a React app and React Bootstrap, I integrated them into a WordPress theme. However, despite spending the entire day trying to troubleshoot the issue, I have been unsuccessful in resolving it. The error message I keep encountering is: Typ ...

node.jsreactjsreact-bootstrap

Specialized storage system for storing data by specific URI keys

Is there a specific data structure or model that allows for storing a value at a customizable URI-based key, and then fallback to a less specific path/domain if the value is null? SET example.com "hello" SET a.example.com/foo "world" GET example.com => ...

node.jsdata-structuresredisrestify

What is the best way to integrate node.js with HTML?

I am currently utilizing node.js to interact with an API on the IBM Cloud platform. I have successfully accessed the response in my code, but now I need to pass this data to an HTML page using "res.send". How can I achieve this? Below is the Node.js code ...

javascriptjsonnode.jsibm-cloudtone-analyzer

Using the mpdf addPage function generates new empty pages

Hey there, I'm facing an issue where using $mpdf->addPage() within a for loop results in creating blank pages instead of adding content. My goal is to generate a new page when a certain condition is met and then populate it with the required conten ...

phphtmlcssmpdf

When utilizing jQuery Ajax, Express.js is limited to retrieving a maximum of six consecutive results

I've encountered an interesting issue that has me stumped. Whenever I click on the "Done" button more than six times in a row, Express.js stops displaying results after the sixth one, limiting me to only seeing six results in my console. Even if I ref ...

jquerynode.jsexpress

Request Cannot Be Processed - Empty POST Body

When attempting to send a POST request to a knowledgebase, I am only receiving the correct response about 5-10% of the time. Most often, I receive an error from the server with the following message: No argument passed{“Error”:{“Code”:“BadArgum ...

node.jspostbotframework

NodeJs: The client has already received the headers and they cannot be modified anymore

I'm currently developing a straightforward login validation system in the route that will also validate a jwt token. Here is the code snippet for the route: router.post("/contacts", async function (req, res, next) { await checkLogin(req, res, next) ...

node.jsexpressjwt

The signature does not match, so the SignedURL is being rejected

I recently started using AWS S3 and encountered the SignatureDoesNotMatch error while trying to upload an image. I double-checked for any typos in my keys, ensured that my system time was accurate, but still couldn't resolve the issue. My workflow, mo ...

node.jsamazon-web-servicesamazon-s3aws-sdk-js

Problem with CSS multi-level dropdown navigation in a vertical layout

I am in the process of creating a navigation menu with dropdown menus, which are working correctly. Now, I would like to add another sub-menu drop down inside dropdown 1, but I am having trouble getting it to function properly. How can I make Sub Menu 1 ac ...

htmlcss

Tips for transmitting data from Dart to Typescript Cloud functions, encountering the UNAUTHENTICATED error code

Snippet of Dart code with token passed to sendToDevice: Future<void> _sendNotification() async { CloudFunctions functions = CloudFunctions.instance; HttpsCallable callable = functions.getHttpsCallable(functionName: "sendToDevice"); callable.c ...

node.jstypescriptfirebasefluttergoogle-cloud-functions

Display a div using Jquery depending on the visibility and checked value of another div

Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario. Here is the HTML setup: <div id="main-question"> <div class="form-group"> <div class="form-radios"> ...

jquerycss

Challenge encountered while attempting to implement grid system in ionic framework

I'm completely new to the world of ionic framework, and I really need some assistance in completing this view. Please see the image reference https://i.stack.imgur.com/WOBFw.png I have made an attempt at it with the following code: <div class ...

cssangularjstwitter-bootstrapionic-framework