我正在實作一個項目,根據我的了解,@use
只會將程式碼匯入到我們使用@use
的樣式表中,而不是任何其他樣式表。
sass文檔:
#@use載入的成員(變數、函數和混合)只在載入它們的樣式表中可見。如果其他樣式表也想存取它們,它們需要編寫自己的@use規則。
#所以我有一個名為_b.scss
的文件,它是我編譯為css的sass的主文件,然後我有一個名為a.scss
的文件,我在其中通過@use
導入了_b.scss
,然後,我有一個名為project.scss
的文件,在其中我導入了a.scss
,所以根據這個層次結構,_b.scss
不應該在project.scss
中可訪問,但是當我將project.scss
編譯為css時,在我的css檔案中,我編譯了來自_b.scss
的scss程式碼(然而,如果我在project.scss
中寫入像@debug map-get($colors."red")
這樣的內容,它會拋出一個錯誤),那麼為什麼會發生這種情況呢?
附註:我使用gulp
來編譯、清除和監視我的scss和css。
//文件层次结构 index.html gulpfile.js a.scss _b.scss project project.scss css project.css
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/project.css"> <title>Document</title> </head> <body> <div class="bg-red">hey</div> <div class="bg-purple">hey</div> </body> </html>
//_b.scss $colors:( "red":red, "blue":blue, "green":green, "yellow":yellow, "brown":brown, "purple":purple ); @each $key,$val in $colors{ .bg-#{$key}{ background: $val; } }
//a.scss @use "b";
//project.scss @use "../a";
//project.css .bg-red { background: red; } .bg-purple { background: purple; }
//gulpfile.js const { src, dest, watch, series } = require('gulp') const sass = require('gulp-sass')(require('sass')) const purgecss = require('gulp-purgecss') function buildStyles() { return src('project/*.scss') .pipe(sass({})) .pipe(purgecss({ content: ['*.html'] })) .pipe(dest('css')) } function watchTask() { watch(['project/*.scss', '*.html'], buildStyles) } exports.default = series(buildStyles, watchTask)
根據您自己的引用(重點是我的):
請注意,這不包括樣式規則。根據文件,樣式規則仍然「載入」到產生的樣式表中:
因此,
@use
用於隔離可見的成員(變數、函數和混合),同時輸出樣式規則。