錯誤文件

Question

我已經建立了一口來處理我的引導模板編譯：

gulp.task('sass', function() { 
    return gulp.src('app/assets/sass/**/*.scss') 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(gulp.dest('app/assets/css')) 
    .pipe(browserSync.reload({ 
     stream: true 
    })); 
}); 

我SASS主要theme.scss文件看起來像：

@import "helpers/variables"; // custom variables  
@import "../bootstrap/sass/bootstrap"; // original Bootstrap files 
@import "pages/index"; // custom styles 

問題是當我原來覆蓋引導變量helpers/variables，如：

// Variables 

$navbar-height: 100px; 

我得到以下埃羅R：

Error: File to import not found or unreadable: helpers/variables.

然而，節約的主要main.scss沒有任何變化後，我得到錯誤信息修復了問題，所以編譯去，因爲它應該。有任何想法嗎？

PS：我的SCSS文件樹如下：

/assets/bootstrap/sass/_bootstrap.scss 
/assets/sass/helpers/_variables.scss 
/assets/sass/pages/_index.scss 
/assets/sass/theme.scss 

Answer 1

bootstrap.scss是要找的文件傭工/ _variables.scss相對於自己的路。編輯bootstrap.scss以擁有自己的_variables.scss文件路徑。

作爲一個說明，（有沒有正確或錯誤的方式做到這一點），我覺得建立使用框架以這種方式青菜主題有幫助：

src/ 
├── scss/ 
│ ├── my-theme/ 
│ │ ├── my-theme.scss 
│ │ ├── _components.scss (and so on) 
│ │ └── _new-variables.scss (a modified copy of bootstrap's) 
│ └── vendor/ 
│  └── bootstrap/ (unaltered, for easier upgrading) 
|   ├── bootstrap.scss 
|   ├── _alerts.scss (and so on) 
|   └── variables.scss 
└─── main.scss 

而且main.scss看起來是這樣的：

// Core variables and mixins 
@import "my-theme/new-variables"; 
@import "bootstrap/mixins"; 

// Reset and dependencies 
@import "bootstrap/normalize"; 
@import "bootstrap/print"; 
@import "bootstrap/glyphicons"; 

// Core CSS 
@import "bootstrap/scaffolding"; 
@import "bootstrap/type"; 
@import "bootstrap/code"; 

... the rest of boostrap stuff here ... 

// Custom Theme 
@import "my-theme/my-theme";