一飲而盡，上海社會科學院的includepaths未能包括供應商SCSS（可能的排序問題，也是）

Question

我在風格中的各個子目錄我的應用程序SASS（在SCSS文件）目錄，其中一些來自不同廠商的@extend薩斯款式其中， （通過bower）位於供應商目錄下的各個子目錄中。

不幸的是，sass任務沒有找到那些供應商的scss文件，以及我失敗的@extend聲明，因爲他們找不到他們試圖擴展的sass文件。

Error in plugin 'sass' 
Message: 
    styles/censum/censum.scss 
Error: ".graph-row" failed to @extend ".row". 
     The selector ".row" was not found. 
     Use "@extend .row !optional" if the extend should be able to fail. 
     on line 2 of styles/censum/censum.scss 

我最小化的例子如下。

gulp.task('sass', function() { 
    gulp.src('./styles/**/*.scss') 
    .pipe(gulpSass({ includePaths: ['./vendor'] }).on('error', gulpSass.logError)); 
}); 

我也嘗試將供應商目錄添加到gulp.src而不使用includePaths，例如，

gulp.task('sass', function() { 
    gulp.src(['./vendor/**/*.scss', './styles/**/*.scss']) 
    .pipe(gulpSass().on('error', gulpSass.logError)); 
}); 

這似乎引用供應商的文件（因爲它拖動一切我猜的），但我相處的線路故障：

Message: 
    vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss 
Error: Undefined variable: "$btn-primary-bg". 
     on line 7 of vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss 
$bs-datetimepicker-active-bg: $btn-primary-bg !default; 

這可能是一個順序問題？

Answer 1

好，裸陪我。我分享的內容是基於我對你的問題的理解。我會從一個新項目的角度來討論它，這對我來說似乎很好。

假設我們有一個名爲時髦項目，裏面是通過運行創造了的package.json文件中的以下內容：

npm init -y 

然後我們要安裝咕嘟咕嘟和SASS的組件如所以：

npm install gulp gulp-sass -save-dev 

裏面在我們項目的根Gulpfile.js我們有下面的代碼：

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

gulp.task('sass', function() { 
    return gulp 
    .src("./scss/**/*.scss") 
    .pipe(sass({includePaths: ['./vendor']})) 
    .pipe(gulp.dest("./dist")); 
}); 

正如你可能從上面的代碼猜，我們有一個廠商目錄，並在我們的項目的根SCSS目錄。

由於我不知道你的供應商的目錄是什麼，我已經用隨機填充我的。在供應商/顏色。SCSS文件我有以下幾點：

.danger { 
    color: red; 
} 

.light { 
    color: silver; 
} 

我也有在供應商/尺寸/ article.scss用下面的代碼中發現一個嵌套的文件：

.title { 
    font-size: 22px; 
} 

現在讓我們來看看什麼是我的scss目錄。

我有一個SCSS/main.scss文件有兩個import語句喜歡如下：

@import "./sidebar/navigation"; 
@import "./content/blog"; 

同樣，所有這個項目的是隨機性。我只是試圖顯示所有這些文件和目錄的構建過程。

我在我的scss文件夾中有兩個SCSS文件。我有一個文件SCSS /側邊欄/ navigation.scss用下面的代碼：

nav { 
    padding: 10px; 
} 

最後，我有一堆進口的文件，並延伸。此文件是SCSS /內容/ blog.scss，它包含以下內容：

@import "colors"; 
@import "sizing/article"; 

.title { 
    @extend .danger; 
    @extend .title; 
    font-weight: bold; 
} 

因爲咕嘟咕嘟腳本，包括供應商目錄，我們可以使用任何文件的相對路徑。我們從供應商目錄導入這兩個文件，然後在必要時擴展各種類。

運行gulp sass將在項目的dist目錄中生成CSS文件。由於我只使用scss/main.scss進口，它將包含我們所有的樣式。

這是你正在嘗試做什麼？如果是的話，通過我剛分享的一切，看看它是否適合你。

讓我知道。

最好，

Answer 2

IncludePaths接受一個字符串數組。

嘗試更新到以下內容。

gulp.task('sass', function() { 
    gulp.src('./styles/**/*.scss') 
    .pipe(gulpSass({ includePaths: ['./vendor'] }).on('error', gulpSass.logError)); 
}); 

見文檔：在這一個

https://github.com/sass/node-sass#includepaths