SCSS 파일로 일반 CSS 파일을 가져 오시겠습니까?

어쨌든 Sass의 @import명령 으로 일반 CSS 파일을 가져올 수 있습니까? sass의 모든 SCSS 구문을 사용하지는 않지만 여전히 결합 / 압축 기능을 즐기고 있으며 모든 파일의 이름을 * .scss로 바꾸지 않고 사용할 수 있기를 원합니다.

이 글을 쓰는 시점에서 이것이 구현되지 않은 것처럼 보입니다.

https://github.com/sass/sass/issues/193

libsass (C / C ++ 구현)의 경우 가져 오기는 파일 *.css과 같은 방식으로 작동 *.scss합니다. 확장자는 생략하면됩니다.

@import "path/to/file";

가져옵니다 path/to/file.css.

자세한 내용은 이 답변 을 참조 하십시오.

Ruby 구현에 대한 이 답변 을 참조하십시오 (sass gem)

같은 문제를 겪은 후 여기의 모든 답변과 github의 sass 저장소에 대한 의견과 혼동되었습니다.

2014 년 12 월부터이 문제가 해결되었음을 알려 드리고자합니다. 이제 css파일을 sass 파일로 직접 가져올 수 있습니다. github 의 다음 PR 은 문제를 해결합니다.

@import "your/path/to/the/file"파일 이름 뒤에 확장자가없는 구문은 now-와 동일 합니다. 파일을 직접 가져옵니다. *.css끝에 추가 하면 css규칙으로 변환됩니다 @import url(...).

webpack 과 같은 "멋진"새로운 모듈 번 들러 를 사용하는 ~경우 경로의 시작 부분에 사용해야 합니다. 따라서 다음 경로를 가져 오려면 다음과 node_modules/bootstrap/src/core.scss같이 작성하십시오
@import "~bootstrap/src/core".

참고 :
모든 사람에게 해당되는 것은 아닙니다. 귀하의 통역사가 libsass그것을 기반으로 한다면 제대로 작동 해야 합니다 ( 이것을 확인 하십시오 ). 나는 @importnode-sass를 사용하여 테스트 했으며 정상적으로 작동합니다. 불행히도 이것은 작동하며 일부 루비 인스턴스에서는 작동하지 않습니다.

포함 할 css 파일에 밑줄을 추가하고 확장자를 scss (예 :)로 전환해야합니다 _yourfile.scss. 그런 다음이 방법으로 호출하면됩니다.

@import "yourfile";

그리고 CSS 표준 @import 지시문을 사용하는 대신 파일 내용이 포함됩니다.

이것은 구현 및 버전부터 병합 된 3.2( 풀 # 754 에 합병 2015년 1월 2일 을 위해 libsass: 문제 originaly 여기에 정의 된 sass# 193 # 556 , libsass# 318 ).

긴 이야기를 짧게 줄이려면 다음 구문을 사용하십시오.

1. 원시 CSS 파일을 가져 오기 (포함)

   구문은 끝에 확장 이 없습니다.css (부분을 실제로 읽은 s[ac]ss|css후 SCSS / SASS에 인라인으로 포함).

   @import "path/to/file";

2. 전통적인 방식으로 CSS 파일을 가져 오기

   구문은, 전통적인 방법으로 진행 와 .css연장 끝에 (에 결과를 @import url("path/to/file.css");컴파일 CSS 인치) :

   @import "path/to/file.css";

그리고 그것은 훌륭합니다 :이 구문은 우아하고 간결하며 이전 버전과 호환됩니다! 그것은과 뛰어난 작동 libsass하고 node-sass.

__

의견에 대한 추가 추측을 피하려면 다음과 같이 명시 적으로 작성하십시오. Ruby 기반 Sass 는 7 년간의 토론 후에도이 기능이 아직 구현되지 않았습니다 . 이 답변을 작성할 때 4.0에서는 아마도의 도움으로 이것을 달성하는 간단한 방법이있을 것이라고 약속했습니다 @use. 새로운 "예정된" "제안 승인"태그가 문제 # 556 과 새로운 @use기능 에 할당 된 것 같습니다 .

무언가가 변하자마자 답변이 업데이트 될 수 있습니다 .

Chris Eppstein은 인라인 CSS 가져 오기 기능을 갖춘 나침반 플러그인을 만들었습니다.

https://github.com/chriseppstein/sass-css-importer

이제 CSS 파일 가져 오기는 다음과 같이 쉽습니다.

@import "CSS:library/some_css_file"

.css수정하지 않으려 는 파일 이있는 경우 확장명을 변경하지 마십시오 .scss( 예 :이 파일은 유지 관리하지 않는 분기 된 프로젝트의 파일 임). 항상 심볼릭 링크를 만든 다음로 가져올 수 있습니다 .scss.

심볼릭 링크를 만듭니다.

ln -s path/to/css/file.css path/to/sass/files/_file.scss

symlink 파일을 대상으로 가져옵니다 .scss.

@import "path/to/sass/files/file";

대상 출력 .css파일은 .scssCSS 가져 오기 규칙이 아닌 가져온 symlink 파일의 컨텐츠를 보유합니다 ( @yaz가 댓글이 많은 투표로 언급 함 ). 확장명이 다른 파일이 중복되어 있지 않으므로 초기 .css파일 내에서 이루어진 모든 업데이트가 즉시 대상 출력으로 가져옵니다.

심볼릭 링크 (Symlink 또는 Soft Link)는 절대 또는 상대 경로 형식으로 다른 파일에 대한 참조를 포함하고 경로 이름 확인에 영향을주는 특수한 유형의 파일입니다.
– http://en.wikipedia.org/wiki/Symbolic_link

써드 파티 importer를 사용하여 @import시맨틱 을 사용자 정의 할 수 있습니다 .

노드 말대꾸-수입 한 번 작동, 노드 말대꾸 (Node.js를위한)은 수입 CSS 파일을 인라인 할 수 있습니다.

직접 사용 예 :

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: "input.scss",
  importer: importOnce,
  importOnce: {
    css: true,
  }
});

grunt-sass 설정 예제 :

var importOnce = require("node-sass-import-once");
grunt.loadNpmTasks("grunt-sass");

grunt.initConfig({
  sass: {
    options: {
      sourceMap: true,
      importer: importOnce
    },
    dev: {
      files: {
        "dist/style.css": "scss/**/*.scss"
      }
    }
  });

node-sass-import-once는 현재 명시적인 밑줄없이 Sass 부분을 가져올 수 없습니다. 예를 들어 파일과 함께 partials/_partial.scss:

• @import partials/_partial.scss 성공
• @import * partials/partial.scss 실패

일반적으로, 사용자 정의 수입이 변경 될 수 있음을 알고 있는 수입 의미를. 사용하기 전에 문서를 읽으십시오.

내가 올바른 CSS가 scss와 호환되면 CSS 확장을 scss로 변경할 수 있으며 계속 작동해야합니다. 확장명을 변경하면 해당 확장명을 가져올 수 있으며 파일에 포함됩니다.

그렇게하지 않으면 sass는 원하지 않는 CSS @import를 사용합니다.

나는 우아한 Rails와 같은 방법을 알아 냈습니다. 먼저 .scss파일 이름을로 바꾸고 .scss.erb다음과 같은 구문을 사용하십시오 ( highlight_js-rails4 gem CSS asset의 예 ).

@import "<%= asset_path("highlight_js/github") %>";

SCSS를 통해 파일을 직접 호스팅 할 수없는 이유 :

이렇게 @importSCSS에서하는 것은 당신이 명시 적으로 전체 경로 중 하나 또는 다른 방법을 사용뿐만 CSS 파일에 대한 벌금을 작동합니다. 개발 모드에서 rails s자산을 컴파일하지 않고 서비스하므로 이와 같은 경로가 작동합니다.

@import "highlight_js/github.css";

... 호스트 경로가 그대로 있기 때문 /assets/highlight_js/github.css입니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 "소스보기"를 선택한 다음 위의 스타일 시트 링크를 클릭 @import하면 다음과 같은 줄이 나타납니다.

@import url(highlight_js/github.css);

SCSS 엔진은로 번역 "highlight_js/github.css"됩니다 url(highlight_js/github.css). 이것은 자산이 사전 컴파일 된 파일 이름에 해시가 주입 된 프로덕션에서 실행하려고 시도 할 때까지 수영으로 작동합니다. SCSS 파일은 여전히 /assets/highlight_js/github.css사전 컴파일되지 않았고 프로덕션에 존재하지 않는 정적으로 분석됩니다 .

이 솔루션의 작동 방식 :

먼저 .scss파일을 로 이동하여 .scss.erbSCSS를 Rails 용 템플릿으로 효과적으로 전환했습니다. 이제 <%= ... %>템플릿 태그를 사용할 때마다 Rails 템플릿 프로세서는 이러한 스 니펫을 다른 템플릿과 마찬가지로 코드 출력으로 대체합니다.

파일에 진술 asset_path("highlight_js/github")하면 .scss.erb두 가지 작업이 수행됩니다.

1. rake assets:precompile적절한 CSS 파일을 미리 컴파일 하도록 작업을 트리거 합니다.
2. Rails 환경에 관계없이 자산을 적절하게 반영하는 URL을 생성합니다.

이것은 또한 SCSS 엔진이 CSS 파일을 파싱하지도 않는다는 것을 의미합니다. 그것은 단지 그것에 링크를 호스팅하고 있습니다! 따라서 호키 멍키 패치 또는 중대한 해결 방법이 없습니다. 우리는 의도 한대로 SCSS를 통해 CSS 자산을 제공하고 있으며 Rails의 의도대로 CSS 자산의 URL을 사용하고 있습니다. 단!

간단한 해결 방법 :

전체 또는 거의 모든 CSS 파일은 마치 scss처럼 해석 될 수 있습니다. 또한 블록 내부로 가져올 수도 있습니다. CSS의 이름을 scss로 바꾸고 가져옵니다.

실제 구성에서는 다음을 수행합니다.

먼저 .css 파일을 임시 파일로 복사합니다. 이번에는 확장자가 .scss입니다. 그런트 구성 예 :

copy: {
    dev: {
        files: [
            {
                src: "node_modules/some_module/some_precompiled.css",
                dest: "target/resources/some_module_styles.scss"
            }
        ]
    }
}

그런 다음 부모 scss에서 .scss 파일을 가져올 수 있습니다 (예에서는 블록으로 가져 오기).

my-selector {
  @import "target/resources/some_module_styles.scss";
  ...other rules...
}

참고 : 이것은 CSS가 여러 번 파싱 될 수 있기 때문에 위험 할 수 있습니다. 원본 CSS에 scss-interpretable artifact가 포함되어 있는지 확인하십시오 (불가능하지만 발생하면 결과를 디버깅하기가 어렵고 위험합니다).

이제 다음을 사용하여 가능합니다.

@import 'CSS:directory/filename.css';

이 작동하는지 확인할 수 있습니다.

class CSSImporter < Sass::Importers::Filesystem
  def extensions
    super.merge('css' => :scss)
  end
end

view_context = ActionView::Base.new
css = Sass::Engine.new(
  template,
  syntax:     :scss,
  cache:      false,
  load_paths: Rails.application.assets.paths,
  read_cache: false,
  filesystem_importer: CSSImporter # Relevant option,

  sprockets:  {
    context:     view_context,
    environment: Rails.application.assets
  }
).render

Chriss Epstein의 신용 : https://github.com/sass/sass/issues/193

단순한.

@import "경로 /to/file.css";