SASS를 사용할 때 어떻게 다른 디렉토리에서 파일을 가져올 수 있습니까?

93

SASS에서 다른 디렉토리에서 파일을 가져올 수 있습니까? 예를 들어 다음과 같은 구조가있는 경우 :

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

template.scss는를 사용하여 @import "common"_common.scss를 가져올 수 있지만 more_styles.scss가 _common.scss를 가져올 수 있습니까? 나는 몇 가지 일을 포함하여 노력 @import "../sub_directory_a/common"하고 @import "../sub_directory_a/_common.scss"있지만 아무것도 작동하는 것 같다 없습니다.

import  sass 
— spaaarky21
소스

답변:

69

SASS에 대한 몇 가지 변경으로 인해 처음에 시도한 작업이 가능해졌습니다.

@import "../subdir/common";

우리는 다음 위치에있는 완전히 관련이없는 폴더에서도 작동하도록했습니다 c:\projects\sass.

@import "../../../../../../../../../../projects/sass/common";

충분히 추가하십시오 ../드라이브 루트에서 끝날 것이라고 확신 할 수있을 하면됩니다.

물론이 솔루션은 예쁘지 않지만 I c:\projects\sass환경 변수 SASS_PATH(from : : load_paths reference )를 동일한 값으로 사용 하거나 설정 하지 않고 완전히 다른 폴더에서 가져 오기 작업을 수행 할 수 없습니다 .

— 올리버
소스
9
"아름답다"입니다! 그러나이 답변은 많은 찬성 투표를 받고 있습니다. 이것이 정말로 더 나은 방법으로 간주 -I됩니까? 해당 경로 이름이 변경되면 많은 검색 및 교체가 수행됩니다. 그리고 그것은 .scss을 공유하는 사람의 동일한 로컬 폴더 구조를 필요
— WiseOldDuck
14
"그냥 ../를 충분히 추가하여 드라이브 루트에서 끝나고 계속 진행할 수 있습니다." 내 하루를 만든 하하하.
— 스티브 해리슨
4
이 답변을 완전히 무시하는 것이 좋습니다. 불행히도 그것은 많은 SO 질문 중 하나이며, 투표로 잘못 답변됩니다. 코드를 쉽게 깨 뜨리려면 사용하십시오. 강력한 솔루션을 원한다면 아래 내 대답을 참조하십시오.
— adi518
2
@ adi518 : "코드가 쉽게 깨지기를 원한다면 그것을 사용하십시오." 주어진 솔루션은 그 이후로 우리를 위해 일해 왔으며 (지금 거의 4 년이 지났습니다) 아무것도 망가지지 않았습니다. 나는 이것이 다소 더러울 수 있지만 관련된 일부 도구의 내부를 너무 깊게 파지 않고 신속하게 작업을 완료하는 솔루션 중 하나라고 생각합니다.
— Oliver
2
진지하게 이러지 마세요.
— shinzou
34

-I명령 줄 스위치 또는 :load_pathsRuby 코드의 옵션을 사용하여 sub_directory_aSass의로드 경로 에 추가 할 수 있습니다 . 따라서에서 Sass를 실행하는 경우 root_directory다음과 같이하십시오.

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

그럼 당신은 간단하게 사용할 수 있습니다 @import "common"에서 more_styles.scss.

— Miikka
소스
1
큰. 그게 바로 제가 알고 싶었던 것입니다. 그리고 나는 MisterJack도 무언가에 있다고 생각하지만 Compass는 이미 경로에 폴더가있는 것처럼 들립니다.
— spaaarky21 2011
3
체인 -I 플래그는 예를 들어 하나 이상의 디렉토리를 포함하는sass -I sub_directory_a -I sub_directory_c --watch sub_directory_b:sub_directory_b
— esponja 밥
20

sass-loader와 함께 webpack을 사용 ~하여 프로젝트 루트 경로를 참조하는 데 사용할 수 있습니다 . 예를 들어 OPs 폴더 구조를 가정하고 sub_directory_b 내의 파일에 있다고 가정합니다.

@import "~sub_directory_a/_common";

문서 : https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

— 삼미
소스
8
이것은 node_modules/프로젝트의 루트가 아니라 가져 오는 것 같습니다 .
— Splaktar
내가 추가 한 "sub_directory_a"나의로 includePaths하고 사용 @import "common";말대꾸 로더를 포함하는 각도 CLI를 사용하는 경우 구문을.
— Splaktar
이것은 승인 된 답변이어야합니다.
— shinzou
4
Splaktar와 동의합니다. sass-loader 문서에서 : webpack은 파일을 해결하는 고급 메커니즘을 제공합니다. sass-loader는 Sass의 사용자 정의 가져 오기 기능을 사용하여 모든 쿼리를 웹팩 해결 엔진에 전달합니다. 따라서 node_modules에서 Sass 모듈을 가져올 수 있습니다. ~를 앞에 추가하여 웹팩이 상대적 가져 오기가 아님을 알립니다. ~ /가 홈 디렉토리로 확인되기 때문에 ~ 만 앞에 추가하는 것이 중요합니다.
— Anthony
참고 ~/나를 위해 홈 디렉토리를 참조하지 않는 것 같습니다. 또는 내가 테스트하려고 시도한 디렉토리. 이것이 어디를 가리키는 지 실제로 시도하고 알아내는 방법이 있습니까 ??
— Douglas Gaskell
8

.scss상대 위치가 다른 중첩 된 가져 오기가있는 파일을 가져 오는 것은 작동하지 않습니다. 가장 많이 제안 된 답변 (을 많이 사용 ../)은 ../프로젝트 배포 OS의 루트에 도달 할만큼 충분히 추가 한 경우 작동하는 더러운 해킹 일뿐 입니다.

  1. 대상 SCSS 경로를 SCSS 컴파일러의 검색 대상으로 추가합니다. scss 구성 파일에 stylesheets 폴더를 추가하면됩니다. 이것은 사용중인 프레임 워크의 기능입니다.

사용 :load_paths에config.rd 나침반 기반의 프레임 워크에 대한 (예는. 레일)

다음 코드 사용 scss-config.json에 대한을fourseven/meteor-scss

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}
  1. 절대 경로를 사용하십시오 (대 상대 경로).

예 fourseven/meteor-scss를 들어를 사용하면 다음 예 {}에 따라 프로젝트의 최상위 수준을 강조 표시 할 수 있습니다.

@import "{}/node_modules/module-name/stylesheet";
— 헬 코드
소스
에 특정한 것은 없으며 meteor단지 예일뿐입니다.
— helcode
4

선택한 답변은 실행 가능한 솔루션을 제공하지 않습니다.

OP의 관행이 불규칙 해 보입니다. 공유 / 공통 파일은 일반적으로 partials표준 상용구 디렉토리 인에 있습니다. 그런 다음 partials코드에서 부분을 해결하려면 구성 가져 오기 경로에 디렉터리를 추가해야 합니다.

이 문제를 처음 접했을 때 SASS는 __dirname현재 작업 디렉토리 ( cwd)에 대한 절대 경로를 유지하는 Node의와 유사한 전역 변수를 제공 할 것이라고 생각했습니다 . 안타깝게도 그렇지 않습니다. 그 이유는@import 지시문 이 불가능하기 때문에 동적 가져 오기 경로를 수행 할 수 없기 때문입니다.

SASS 문서 에 따르면 .

:load_pathsSass 구성에서 설정해야합니다 . OP는 Compass를 사용하기 때문에 여기 에있는 문서에 따라 수행 하겠습니다 .

목적에 따라 CLI 솔루션을 사용할 수 있지만 그 이유는 무엇입니까? 에 추가하는 것이 훨씬 더 편리합니다 config.rb. 재정의를 위해 CLI를 사용하는 것이 합리적입니다.config.rb (예 : 다른 빌드 시나리오).

따라서 config.rb프로젝트 루트 아래에 있다고 가정 하면 다음 줄을 추가하십시오. add_import_path 'sub_directory_a'

이제 @import 'common';어디서나 잘 작동합니다.

이것이 OP에 대한 대답이지만 더 많은 것이 있습니다.

부록

즉, @importCSS가 기본적으로 제공 하는 바닐라 지시문을 통하지 않고 CSS 파일 내용을 SASS와 실제로 병합 하는 방식으로 CSS 파일을 가져 오려는 경우가 발생할 수 있습니다 . 결론이 나지 않게 답변 된 또 다른 질문 이 있습니다 (솔루션이 교차 환경에서 작동하지 않음). 해결책은 이 SASS 확장 을 사용 하는 것 입니다.

설치가 완료되면 다음 줄을 구성에 추가 한 다음 require 'sass-css-importer'코드 어딘가에 추가합니다 .@import 'CSS:myCssFile';

이 기능이 작동하려면 확장자를 생략해야합니다.

그러나 기본 경로 add_import_path가 아닌 경로에서 CSS 파일을 가져 오려고 할 때 동일한 문제가 발생하고 CSS 파일을 존중하지 않습니다. 따라서이를 해결하려면 구성에 자연적으로 유사한 또 다른 행을 추가해야합니다.

add_import_path Sass::CssImporter::Importer.new('sub_directory_a')

이제 모든 것이 잘 작동합니다.

추신, sass-css-importer문서 CSS:에 .css확장명 을 생략하는 것 외에도 접두사가 필요하다는 것을 알았습니다 . 나는 그것이 상관없이 작동한다는 것을 알았습니다. 누군가가 문제를 시작했지만 지금까지 답이 없었습니다.

— adi518
소스
2

Gulp는 sass 파일을 감시하고 includePaths를 사용하여 다른 파일의 경로를 추가하는 작업을 수행합니다. 예:

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
    .pipe(gulp.dest('css'));
});
— 망할 징수
소스
7
includePaths가 -I명령 줄 의 옵션을 사용하고 있다는 것을 이해하고 있습니까?
— cimmanon
2

node-sass(의 공식 SASS 래퍼 node.js)는 --include-path이러한 요구 사항을 지원 하는 명령 줄 옵션 을 제공합니다.

예:

에서 package.json:

"scripts": {
    "build-css": "node-sass src/ -o src/ --include-path src/",
}

이제 src/styles/common.scss프로젝트에 파일이있는 경우 다음을 사용하여 가져올 수 있습니다.@import 'styles/common'; 어느 곳에서나 .

자세한 내용은 https://github.com/sass/node-sass#usage-1 을 참조하십시오.

— 비제이 아 가르 왈
소스
1

가져올 파일을 정의하려면 모든 폴더 공통 정의를 사용할 수 있습니다. 정의하고있는 파일과 관련이 있다는 것을 알고 있어야합니다. 가져 오기 옵션에 대한 자세한 내용은 여기에서 확인할 수 있습니다 .

— 네샤 조릭
소스
1

Visual Studio에서 웹 컴파일러 를 사용하는 경우 compilerconfig.json.defaults 에 경로를 추가 할 수 있습니다 includePath. 그런 다음 ../컴파일러가 가져 오기를 찾을 위치로 includePath를 사용하므로 몇 개가 필요하지 않습니다 .

예를 들면 :

"includePath": "node_modules/foundation-sites/scss",
— DavGarcia
소스
0

이것은 반답입니다.

Compass를 확인 하세요 _common.scss. partials폴더 안에 넣은 다음으로 가져올 수 @import common있지만 모든 파일에서 작동합니다.

— 알레산드로 벤드 루스 콜로
소스
미카 씨의 반응은 정말 제가 추구했던 것이라 생각 합니다만, 지금은 컴퍼스도 궁금합니다. partials 디렉토리가 특정 프로젝트에 특정한 것입니까? 아니면 Compass가 사용되는 모든 곳에서 partials 디렉토리에있는 파일을 "전역 적으로"사용할 수 있습니까?
— spaaarky21 2011
4
이것은 질문에 전혀 대답하지 않습니다.
— cimmanon
0

나는 같은 문제에 부딪쳤다. 내 솔루션에서 나는 이것에 들어갔다. 따라서 다음은 코드입니다.

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

한 scss를 다른 scss로 가져 오려면 부분적이어야합니다. 당신이 다른 디렉토리에서 가져 오기를 할 때 당신의 이름 more_styles.scss에를 _more_styles.scss. 그런 다음template.scss 이 @import처럼../sub_directory_b/_more_styles.scss . 그것은 나를 위해 일했습니다. 그러나 당신이 언급했듯이 ../sub_directory_a/_common.scss작동하지 않습니다. 그것은 template.scss. 그것이 작동하지 않는 이유입니다.

— 사지 두르 라만
소스
0

가장 좋은 방법은 sass-loader를 사용하는 것입니다. npm 패키지로 제공됩니다. 모든 경로 관련 문제를 해결하고 매우 쉽게 만듭니다.

— Rut Shah
소스
-6

나는 같은 문제가 있었고 다음과 같은 파일에 경로를 추가하여 해결책을 찾았습니다.

@import "C : / xampp / htdocs / Scss_addons / Bootstrap / bootstrap";

@import "C : / xampp / htdocs / Scss_addons / Compass / compass";

— Netix
소스
1
유사한 대답이 이전에 주어졌지만 절대 경로는 일반적인 대답으로 서버에 따라 다릅니다 (물론 "좋아요"라고 말 했음).
— dakab
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.