Questions tagged [css-import]

The @import CSS at-rule is used to import style rules from other style sheets.

31 questions
314
votes
14 answers

How to import Google Web Font in CSS file?

I'm working with a CMS which I only have access to the CSS file. So, I can't include anything in the of the document. I was wondering if there was a way to import the web font from within the CSS file?
David
  • 4,717
  • 8
  • 35
  • 46
25
votes
9 answers

react-slick: Import CSS from slick-carousel fails

React beginner here. My app uses create-react-app, and I'm pulling in react-slick for a carousel. I'm trying to follow the directions that are provided in the setup for react-slick, but the following doesn't work for me: @import…
flysi3000
  • 395
  • 1
  • 4
  • 9
13
votes
5 answers

How to import external css file in nextjs app

I am working on react based nextjs app. Some npm packages are using external css import. I am getting error like Module parse failed, you may need an appropriate loader to handle this file type. How can I support css import from external packages…
Mira Thakkar
  • 339
  • 1
  • 6
  • 19
5
votes
1 answer

How to use Material Design Icons in a web component?

Looks like that mdi is not working inside web components, or do I miss something? I want to develop a web component that encapsulates it's dependencies, adding the link to the parent document works, but it violates the original…
4
votes
0 answers

Performance of CSS @import with layers vs. link

Assuming there are no internal embeds within the CSS files, is there any performance drawback using CSS layers and @import vs. in the following server-side-rendered scenario: Using :
Dan
  • 5,836
  • 22
  • 86
  • 140
4
votes
1 answer

Laravel - Add custom styling to the existing app.scss

I'm new to Laravel and I've read a few other questions on Stackoverflow about adding custom styling to Laravel. The reason I'm creating a new stackoverflow question is because Laravel seems to compile a single app.css, that also loads bootstrap. I…
4
votes
1 answer

Is that possible to use css variable in css "background url"

I would like to set a base domain with all of my pictures in CSS file, here's what I tried: global.css :root { --bgd: #C0C0C0; --picdomain: "https://somedomain.com/"; } s1.css @import url("global.css"); body { background-color: var(--bgd);…
RRTW
  • 3,160
  • 1
  • 35
  • 54
3
votes
1 answer

How does the code in App.css gets included when exporting default App?

I am new to react (Javascript as well), I got this doubt reagarding the output when rendering the React Component-> App of the template code generated using 'create-react-app'. Here is the App.js: import React from "react"; import…
noobron
  • 41
  • 1
  • 8
3
votes
1 answer

Block page rendering for @import CSS

TLDR; skip to the problem section Background We have a very large monolith legacy application. We are in the process of stripping functionality out into a new application. These two applications have vastly different UI's built in vastly different…
ste2425
  • 4,656
  • 2
  • 22
  • 37
3
votes
0 answers

Jekyll - Recommended way of importing files

In my recent efforts to understand, maintain & add features to an existing website, built with Jekyll, I have posted a few questions (see this & this). I have added a js slider plugin on the home page. The CSS file that came with the slider was…
Kayote
  • 14,579
  • 25
  • 85
  • 144
1
vote
1 answer

Why can't i use imported css class in html?

I have an Angular project and created a custom theme with material theme creator. From the creator, I got 6 CSS files. In one of them, there are a lot of CSS variables created and in another it creates classes that use those CSS variables. Here is…
Sidereus
  • 200
  • 3
  • 13
1
vote
1 answer

stylings work even without importing css file in JS files

I have a create-react-app project. In src folder, I import index.css into index.js file to style globally. Besides that, I also have multiple css files for each route. But my concern is the stylings in other css files work even though I don't import…
Thi Nguyen
  • 49
  • 2
  • 6
1
vote
3 answers

Background color overridden even after reversing the order of CSS layers

I want to use the new CSS cascade layers feature supported by latest versions of Chrome, Firefox, Safari, and Edge (see the support table). I'm importing a stylesheet from highlight.js. It has a class named hljs that applies a background color to…
Mahozad
  • 18,032
  • 13
  • 118
  • 133
1
vote
1 answer

Why can't I target my custom-defined HTML elements in CSS?

In my HTML, I've got: ... In custom.js, say I've defined: class Custom extends HTMLElement { connectedCallback() { const shadow =…
Antrikshy
  • 2,918
  • 4
  • 31
  • 65
1
vote
0 answers

How to get Node.js to accept css imports?

Is there any known way to get Node.js to accept css imports when running javascript files? More specifically, is there a known way to get a React app (that imports css files to render pages) to run on a node.js server to render the app to a string…
Mr.Drew
  • 939
  • 2
  • 9
  • 30
1
2 3