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

Displaying content using Jquery's slideDown feature, overlapping existing content

I am working on displaying one piece of content over another using Jquery slidedown as an overlay. Despite adding z-index properties, I am struggling to make it work. My goal is to have the div with class "selection_nip" appear as an overlay on top of ano ...

jqueryhtmlcss

javascript accessing all data in firebase real-time database using JavaScript the right way

Working with node.js, I am retrieving data from the firebase real-time database. However, the data is being returned in the following format: Data Retrieval Code import firebaseApp from '../config.js'; import { getDatabase, ref, onValue } from & ...

javascriptnode.jsjsonfirebase-realtime-database

The timestamp is currently displaying as 2014-11-02T05:00:00.000Z rather than the expected 2014-11-02 00:00:00

Issue: The SELECT * query is returning dates in the wrong format. I am using the mysql2 module to run connection.query() and pass data to a server-side variable, then accessing it on the client-side with AJAX. router.post('/applicants', functi ...

javascriptmysqlnode.jsexpressphpmyadmin

Arranging text within a td cell

This is what I currently have: <tr> <td colspan="4" style="font-size:7pt; font-color:red; font-weight: bold;"> PLEASE NOTE: SPECIFY THE ARTICLE IN AS MUCH DETAIL AS POSSIBLE </td> </tr> However, the text does not a ...

htmlcss

Sort the results by total count in Mongoose Express Node.js after grouping by id

I have a unique collection of items: { "_id": { "$oid": "5f54b3333367b91bd09f4485" }, "items": [ { "_id": 20, "name": "Turkish Coffee", "price": ...

javascriptnode.jsexpressmongoose

Is there a way to effectively manage exceptions in Multer when I have to incorporate middlewares post file upload?

Express JS recommends using Multer as a middleware package for file uploads. When looking at their error handling section, they provide this example: const multer = require('multer') const upload = multer().single('avatar') app.post(&a ...

node.jsexpressfile-uploadmulter

Exploring Font Choices: Customizing Your Text Style

I've been attempting to incorporate my own font into my website, but despite researching several Stack Overflow articles, I'm facing various browser-specific and path-related issues. Sadly, I haven't been able to successfully display my font ...

htmlcssfonts

What are the available methods for incorporating node.js dependencies into a Python package?

At the moment, I am working with a few Python packages that are not yet published and are used locally. For development purposes, I install these packages on Linux using a Bash script into an activated virtual environment. Here's how I do it: cd /roo ...

javascriptpythonnode.jsnpmpython-packaging

Implementing a strategy for managing multiple subdomains and angular applications in conjunction with nodejs

My goal is to implement a system with multiple dynamic subdomains for account holders, as well as an api subdomain. Here's what I envision: https://example.com --> Angular 4 public landing page app https://api.example.com --> NodeJS api https:/ ...

node.jsangularamazon-web-servicesexpress

Unable to locate the "Open" option when initiating the npm start command

Whenever I try to start the server with npm start, I encounter an error stating that it cannot locate the module OPEN. The reference to this module is made in the app.js file. Below is the snippet of code from the file: const path = require('path&apos ...

node.jsnpm

Are the menubar menus positioned beneath a different div element?

Currently facing an issue with an HTML Menubar where the menus are appearing below another div, and not getting displayed as expected: ...

htmlcsshover

Having trouble with mongoose-paginate and react using material-ui's TablePagination component? Encountering issues where the second page onwards does not render after

I am still learning my way around React, and I believe there is a crucial component missing in this particular React setup. Any assistance leading to a solution will be greatly appreciated. The Functionality I'm Striving For Here - I aim to incorpora ...

node.jsreactjsmongodbexpressmaterial-ui

Using Javascript, you can create a function that can disable or enable a text link based on

Here is the code snippet showcasing CSS styles and HTML elements: CSS: .enableLink{ font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#069; padding-right:20px; text-decoration:underline; cursor:pointer; } .disableLink{ display:none; fon ...

javascriptjqueryhtmlcssajax

Arranging shapes for varying levels of magnification

Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...

htmlcssformspositioning

Tips for creating an array in a <script> tag within an hbs view template

Currently, I am delving into the world of full stack web development with a focus on Node/Express. The project at hand is to create a voting app as part of a challenge from FreeCodeCamp, which you can find here. To display user votes in pie charts on the f ...

arraysnode.jsexpresshandlebars.js

encountering issues with resolving dependency tree while attempting to create an Ionic app

Hey, I've been trying to build an ionic app but keep encountering this error that I'm unable to resolve: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: <a href="/cdn-cgi/l/email-protection" ...

node.jsangularionic-frameworknpm

server running on node encountered an error due to a port that is already in use

The Server instance emitted an 'error' event at: at emitErrorNT (net.js:1340:8) at processTicksAndRejections (internal/process/task_queues.js:84:21) { code: 'EADDRINUSE', errno: 'EADDRINUSE', syscall: 'listen', addre ...

node.jsreactjstypescript

Ways to determine if the property of a document has been altered?

Currently, I am in the process of writing tests for an Express CRUD application. The specific route I am focused on is the account recovery route. This route accepts POST requests with an email included in the body. Essentially, the application will search ...

javascriptnode.jsmongodbexpressjestjs

Node.js producing several asynchronous responses

In my current project with a node.js app, the goal is to send a large amount of data from various sources to the user's dashboard upon login. To prevent holding up the response until all the information is retrieved from the database, I am experiment ...

node.jsexpress

Securely store files by encrypting them with Node.js before saving to the disk

At the moment, I am making use of the multer library to store files on the File system. This particular application is built using Node and Express. I currently have a process in place where I save the file on the server first and then encrypt it. After e ...

javascriptnode.jsexpressencryptionmulter