SCSS 컴파일시 거짓 양성 "정의되지 않은 변수"오류

SCSS 컴파일시 거짓 양성 "정의되지 않은 변수"오류

---

루비 나침반 보석을 사용하여 SCSS를 컴파일 할 때 오류 메시지가 나타납니다.

run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile
out: unchanged sass/partial/grid.scss
out:     error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".)
out:    create css/generated/partial/catalog.css 
out:    create css/generated/partial/base.css 
out: overwrite css/generated/screen.css

내 screen.scss수입품은 다음과 같습니다.

@import "partial/base";
@import "partial/catalog";

내 base부분에는 $paragraphFont정의가 있습니다.

$paragraphFont: 'Lucida Sans', arial;
$regularFontSize: 14px;

그리고 catalog.scss나는 그것을 사용합니다.

.product-view #price-block {
    p {
        font-weight: normal;
        font-family: $paragraphFont;
        ....
    }
}

이상한 점은 CSS가 잘 컴파일되고 $paragraphFont올바르게 채워지는 것입니다. 그래서 컴파일러가 왜 나에게 오류에 대해 불평하는지 모르겠습니다.

---

생성 할 필요가없는 파일을 생성하고 있습니다.

• screen.scss-> screen.css
• base.scss-> base.css
• catalog.scss-> catalog.css

카탈로그 파일이 자체적으로 컴파일되고 있습니다. base.scss를 가져 오지 않기 때문에 변수가 설정되지 않습니다. screen.scss 파일은 필요한 모든 정보를 가져 오기 때문에 예상대로 생성됩니다.

당신이 원하는 것은 부분 이 자체적으로 컴파일되지 않도록 밑줄로 시작하도록 부분 이름을 바꾸는 것입니다.

• screen.scss-> screen.css
• _base.scss (컴파일되지 않음)
• _catalog.scss (컴파일되지 않음)

---

여기에있는 대부분의 사용자에게 적합한 간단한 설명 :

최상위 파일 만 컴파일해야 할 때 모든 sass를 컴파일하고 있습니다.

sass는 일반적으로 다음과 같이 모듈화됩니다.

toplevel.scss
  include child1.scss
  include child2.scss (that also uses variables from child1.sass but does not import child1.scss)
  include child3.scss (that also uses variables from child1.sass but does not import child1.sass)

컴파일 할 때 toplevel.scss 만 컴파일하면됩니다. 다른 파일 (예 : child2.scss)을 자체적으로 컴파일하면 정의되지 않은 변수에 대한 오류가 발생합니다.

gulpfile에서 :

gulp.task('sass', function () {
  gulp
    .src('./static/scss/toplevel.scss') // NOT *.scss
    .pipe(sass())
    // Rest is just decoration
    .pipe(prefixer('last 2 versions', 'ie 9'))
    .pipe(gulp.dest('./static/css/dist'))
    .pipe(livereload(livereloadServer));
});

---

일반적인 Sass 디렉터리 조직 구조를 살펴 보는 것이 좋습니다. 개인적으로 가장 좋아하는 것은 The 7-1 Pattern 입니다.

The nature of it splits commonly used elements into other files, which are all imported by a main.scss to kill redundancies.

But also, firstly pay attention to @cimmanon's answer, as he more directly addresses your question.

---

In your compass log it states:

A)  create css/generated/partial/catalog.css 
B)  create css/generated/partial/base.css

These need to be:

A)  create css/generated/partial/base.css
B)  create css/generated/partial/catalog.css 

My guess is that your screen.scss has incorrect import statements.

참고URL : https://stackoverflow.com/questions/17976140/false-positive-undefined-variable-error-when-compiling-scss