Pourquoi dans les feuilles de style Sass, devrions-nous utiliser @use pour importer du code au lieu d'utiliser directement @import ?
P粉493534105
P粉493534105 2023-09-15 21:45:03
0
1
792

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)

P粉493534105
P粉493534105

répondre à tous(1)
P粉316423089

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal