The @import CSS at-rule is used to import style rules from other style sheets.
Questions tagged [css-import]
21 questions
10
votes
7 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…
![](../../users/profiles/1311287.webp)
flysi3000
- 145
- 1
- 1
- 8
6
votes
3 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…
![](../../users/profiles/5060303.webp)
Mira Thakkar
- 197
- 1
- 3
- 16
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);…
![](../../users/profiles/316441.webp)
RRTW
- 3,044
- 1
- 34
- 52
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…
![](../../users/profiles/3212848.webp)
ste2425
- 4,213
- 2
- 17
- 32
3
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…
![](../../users/profiles/10452426.webp)
Charles Lindbergh McGill
- 73
- 1
- 9
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…
![](../../users/profiles/434697.webp)
Kayote
- 10,838
- 17
- 67
- 123
2
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…
![](../../users/profiles/7633875.webp)
noobron
- 31
- 7
1
vote
0 answers
How to read a CSS variable set in an @import'ed stylesheet in React?
Given the following file structure
app.css
@import https://foo.css
html {
--green: #ff0;
}
https://foo.css/
html {
--red: #f00;
}
How do I read --red?
Already tried
app.tsx
...
useLayoutEffect(() => {
// works
const green =…
![](../../users/profiles/2081434.webp)
doplumi
- 2,422
- 4
- 26
- 40
1
vote
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…
![](../../users/profiles/146334.webp)
Jamesgt
- 453
- 4
- 14
0
votes
1 answer
Sequence of css file imported within a css file
I have a css file that imports many other css files. What will be sequence of css execution? Which css rules are applied first.? From imported files or the file itself?
![](../../users/profiles/2024124.webp)
DhavalR
- 1,361
- 2
- 25
- 53
0
votes
0 answers
Imported stylesheet declaring rules twice
I have two components A and B with respective stylesheets component-a.css and component-b.css that utilise a common set of resources in another stylesheet design.css etc...
(Given component-a.css and component-b.css are imported). If both…
![](../../users/profiles/10048799.webp)
kaleidawave
- 2,054
- 1
- 9
- 25
0
votes
1 answer
Does a CSS @import expose the users IP address?
When doing a @import from a external third party URL inside a CSS file, which data client data will be exposed to the third party?
I’m not quite sure if the third party will be able to see my visitors IP address which would be interesting in terms…
![](../../users/profiles/1512445.webp)
Marijan
- 1,737
- 1
- 11
- 17
0
votes
1 answer
How do I compile multiple css files and javascript files into one file?
I'm going through a wordpress theme building tutorial and was given a folder, https://github.com/t-hoff-94/university-static, with a JavaScript folder and a CSS folder, and also a 'bundled' file for each type that I am linking to for the actual…
![](../../users/profiles/10107088.webp)
HOFF
- 11
0
votes
0 answers
How to mark third-party styles as @media screen {}
Is there any way to inject (not import) css files into another css file?
I am using less and trying this:
@media screen {
@import (less) url("../Content/components/bootstrap/dist/css/bootstrap.min.css") screen;
@import "fanoe.css" screen;
…
![](../../users/profiles/1611620.webp)
nickornotto
- 1,466
- 2
- 29
- 55
0
votes
2 answers
Error importing angular material 6 custom theme in styles.css
I created a custom theme using Angular Material 6. When I import the theme in styles.css I get the error:
./src/styles.css
(./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)
Module build failed: Error:…
![](../../users/profiles/9137079.webp)
Michael Aigboeghian
- 11
- 1
- 4