Using StencilJS to Incorporate CSS/SASS Styles from node_modules

I'm currently facing a challenge in importing a CSS file containing variables from a node_modules package. Despite trying to replicate the process outlined in stencil.config.ts, the builds continue to end up in a different location than intended, leaving me unsure of how to proceed. Here's what I have so far:

  type: "www",
  dir: 'src/global',
  copy: [
    { src: '../node_modules/package/design-tokens/dist/tokens.css', dest: 'themes' }
  ]
}

My immediate goal is to access and include a CSS file with variables located within the node_modules directory. Your guidance on this matter would be greatly appreciated.

Thank you!

javascripttypescriptweb-componentstenciljs

Answer №1

Have you attempted to directly import the file from node modules into your global css file?

Within stenil.config.ts you have

// stenil.config.ts
export const config: Config = {
  globalStyle: "src/global/app.css",
  ....
}

In the app.css file, you can import the variables from node_modules:

/*
 * app.css
 */

@import '~design-tokens/dist/tokens.css';

/*
 * Some other custom css here
 */

The use of ~ signifies the node_modules folder, indicating that design_tokens is the package installed in node_modules.

If necessary, consider utilizing sass for your app.css file as outlined here: . This would involve using the @stencil/sass plugin mentioned in the link for compiling purposes and renaming your app.css to an app.sass instead. However, this step may not be essential if your design tokens are CSS custom properties.

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

Error encountered: The token transfer cannot be completed due to an invalid address

Whenever I attempt to send a token from one address to another, I keep encountering the error mentioned in the title. Below is the relevant snippet of my JavaScript code: tokenContract.transfer($("#targetAddr").val().toString(), $("#amt" ...

javascriptethereumweb3jsmetamask

Encountering issues with saving information to MongoDB

I recently started working with the MERN stack and I am trying to save user information in MongoDB, which includes two string attributes: "name" and "role". However, I encountered an error in the browser console stating "Failed to load resource: Request t ...

javascriptnode.jsreactjsmongodbmern

Troubleshooting problems with data binding in Angular Ionic

Just starting out with Angular and experimenting with building an app in Ionic. I have a screen with 2 input fields and I want to achieve the following. When a user inputs something in the price field, I want the weight field to update accordingly. Simil ...

javascriptangularjsionic-framework

Associating information with a dropdown menu

My goal is to bind a drop-down using a global variable (the array name). The binding works correctly here: Click here - dropdown is populating fine var name = ['us', 'china', 'kenya', 'us', 'china', &ap ...

javascriptjquery.netarraysdropdown

Mastering the art of effectively capturing and incorporating error data

Is there a way to retain and add information to an Error object in typescript/javascript without losing the existing details? Currently, I handle it like this: try { // code that may throw an error } catch (e) { throw new Error(`Error while process ...

javascripttypescriptexception

Encountered an issue while trying to extract data from state - property of null cannot

I'm facing an issue trying to show a navigation item only when a specific flag is true. The problem arises when I attempt to extract data from it, as it returns undefined. Below is the code snippet I have created for this scenario: let navigate = useN ...

javascriptreactjsreact-hooks

Adjust the ZIndex on a div through interactive clicking

For my new project, I'm exploring a concept inspired by Windows 7. The idea is that when you double click on an icon, a window will open. If you keep double clicking on the same icon, multiple windows should appear. The challenge I'm facing is im ...

javascripthtmlcssz-index

Popup modal is obstructed by carousel indicator

I'm having trouble with the following issue: The 3 dots represent my carousel indicator. My problem is that the carousel indicator is blocking my pop-up modal image. I've tried adjusting the z-index of the modal without success. Here is the code ...

javascripthtmlcssangularjs

AngularJS: Encountering an unexpected identifier while trying to make a POST

I'm facing an issue with my http POST request in AngularJS. When I make the function call to $http, I receive a SyntaxError: Unexpected identifier. The unexpected identifier is pointing to the line url: 'rating-add' within my $http call. ‘ ...

javascriptangularjsdjango

Setting the lang attribute on the html element in Nuxt: A step-by-step guide

Customizing the nuxt.config.js file allows for personalization of the head contents by adding meta tags and other elements: module.exports = { /* ** Headers of the page */ head: { title: 'amazing title', meta: [ { charset: ...

javascripthtmlvue.jsnuxt.jsvue-meta

Typescript is experiencing an error due to the use of attr("disabled", false) causing a disruption

Within my ts file, I'm using the code snippet below: $('input[type=hidden]').attr("disabled", false); The code functions as intended, however, an error persists: Argument of type 'false' is not assignable to parameter of typ ...

javascripttypescriptinputdisabled-input

There was an error because the variable "items" has not been defined

Having some trouble with an AngularJS service where I am attempting to add an item to an array every 5 seconds. However, I keep encountering the error 'items is not defined' after the first dynamic addition... I've been tinkering with this ...

javascriptangularjs

Guide on using automapper in typescript to map a complex object to a "Map" or "Record" interface

I have been utilizing the automapper-ts with typescript plugin for automatic mapping. Check it out here While it works smoothly for simple objects, I encountered issues when dealing with complex ones like: Record<string, any> or Map<string, Anoth ...

typescriptts-jest

Is it possible to use `this` when setting a default value in TypeScript?

Does the usage of this in the parameter list of a method in TypeScript fall within the scope? Take a look at the code snippet below: class Foo { constructor(public name) {} bar(str: string = this.name) { console.log(str); } } let f = new Foo("Yo ...

typescriptdefault-value

There seems to be an issue with locating the module '/opt/repo/ROOT/server.js'

Error in server.js on jelastic node.log file When attempting to publish a simple page created with Bootstrap using nodejs express and ejs, the server is returning a 504 Gateway timeout error and the application cannot run. The node.js log file is displayi ...

javascriptnode.jsgitexpressjelastic

Is there a translation issue affecting Chrome version 44?

Recently, Chrome 44 (44.0.2403.89 m) was released and I've encountered some issues with the translate3d feature (on both Mac and Windows versions). This problem is impacting plugins such as fullPage.js and consequently affecting numerous pages at th ...

javascriptjquerycssgoogle-chrome

Organize elements within an array using TypeScript

I have an array that may contain multiple elements: "coachID" : [ "choice1", "choice2" ] If the user selects choice2, I want to rearrange the array like this: "coachID" : [ "choice2", "choice1" ] Similarly, if there are more tha ...

typescript

Shifting static information both above and below a 100vh element

At the moment, I have a stationary image in the center of my screen that moves horizontally when scrolling with the mouse. Now, I want to include a screen above and below this element, each with a height of 100vh. However, when I attempt to do so, the fixe ...

javascriptcssreactjscss-animations

Simulate mobile double tap screen resize using either jQuery or Javascript

UPDATE: I have encountered an issue that requires assistance. I am seeking help with implementing a functionality to automatically resize screen contents on mobile devices by calling a DoubleTap. The reason behind this requirement is that when a script up ...

javascriptphpjquerymobile

The combination of Node.js, Express router, and TypeScript is causing an issue where a string argument is not compatible with the request

I'm currently working on a tutorial to develop a comprehensive REST API. In the process, I've created a TypeScript class that exports a new Express router: import { Router, Request, Response, NextFunction } from 'express'; export clas ...

node.jstypescriptexpress