Je mets en œuvre un projet et d'après ce que j'ai compris, @use
只会将代码导入到我们使用@use
est dans une feuille de style, pas dans une autre feuille de style.
documentation sass :
Les membres chargés @use (variables, fonctions et mixins) ne sont visibles que dans la feuille de style qui les a chargés. Si d'autres feuilles de style souhaitent y accéder, elles doivent écrire leurs propres règles @use.
J'ai donc quelque chose qui s'appelle _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")
comme ceci et cela génère une erreur), alors pourquoi cela se produit-il ?
PS : J'utilise gulp
pour compiler, nettoyer et surveiller mes scss et 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)
Basé sur vos propres citations (c'est moi qui souligne) :
Veuillez noter que cela n'inclut pas les règles de style. D'après les docs, les règles de style sont toujours "chargées" dans la feuille de style générée :
Ainsi,
@use
est utilisé pour isoler les membres visibles (variables, fonctions et mixins) lors de l'affichage des règles de style.