본문 바로가기

CSS

[CSS] @import 적용 안될 때 해결 방법

CSS를 적용할 때 <link> 태그를 이용해서 CSS를 불러온다

예로 보통 여러 개의 CSS파일을 연결하는 경우 아래와 같이 사용한다

<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/style1.css"/>
<link rel="stylesheet" href="css/style2.css"/>

다른 방식으로는 @import를 통해서 하나의 CSS 파일 안에 여러 개의 CSS파일을 쓸 수 있다

@import를 이용해서 하나의 CSS 파일안에 여러 개의 CSS 파일을 넣어서 관리하는 경우 아래와 같이 사용한다

@import "css/style.css"; /*String 방식*/
@import "css/style1.css"; /*String 방식*/
@import url("css/style2.css"); /*url 방식*/
@import url("css/style3.css"); /*url 방식*/

@import를 이용해서 css를 여러 개 연결하는 경우 위와 같이 사용했을 때 안 될 때가 있다

아래와 같이 @import "style.css";를 맨 위로 선언한 경우는 문제없이 CSS가 실행된다

/*실행 예제*/
@import "style.css";

:root {
    --color-black: black;
    --color-gray: gray;
    --color-white: white;
}

단, @import "style.css";를 아래에 맨 위가 아닌 아래에 적용하는 경우 실행되지 않는다

/*잘못된 예제*/
:root {
    --color-black: black;
    --color-gray: gray;
    --color-white: white;
}

@import "style.css";

실행 예제

잘못된 예제