SCSS 파일로 일반 CSS 파일을 가져 오시겠습니까? Sass의 @import명령 으로 일반 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 실패

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