简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
为什么在Sass样式表中，我们应该使用@use来导入代码，而不是直接使用@import？
P粉493534105
P粉493534105 2023-09-15 21:45:03
0
1
753

我正在实施一个项目，根据我的了解，@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)

P粉493534105
P粉493534105

全部回复(1)
P粉316423089
P粉3164230892023-09-16 16:30:48 1 楼

根据您自己的引用（重点是我的）：

请注意，这不包括样式规则。根据文档，样式规则仍然“加载”到生成的样式表中：

因此，@use用于隔离可见的成员（变量、函数和混合），同时输出样式规则。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！