例如，我试图从引导程序的 _navbar.scss 导入 .navbar-nav 而不是整个 _navbar.scss 文件到我编译的 css 文件。有办法吗？
抱歉，之前有人问过这个问题。
【问题讨论】：
标签： css sass scss-mixins
你可以尝试做一个扩展：
.your-class{
@extend .navbar-nav;
}
但是，这只有在您将 _navbar.scss 导入其他地方或 bootstrap.scss 时才有效。
附加
// main.scss
@import ../wherever bootstrap file is/_navbar.scss;
@import _custom.scss;
// _custom.scss
.your-class{
@extend .navbar-nav;
}
【讨论】：
在 javascript 中导入 .scss 的一种方式是
import { navbar-nav } from '_navbar.scss'
在您的组件中使用时，您可以这样做。
<div className={navbar-nav} />
如果你想将它导入到你的 .scss 文件中，那么你可以这样做。
@import '_navbar.scss'
.class {
@extend .navbar-nav
}
【讨论】：
在您学习 Sass 时，这里有一些可能会有所帮助的解释：
更好的措辞有助于...
首先是一些措辞，以便在这里和您谈论编码的其他任何地方获得正确的可理解的沟通：
SASS 不会 minify 给定 CSS，它会编写 CSS。缩小意味着给定的 CSS 代码被后处理器压缩到更短的方式来编写它的过程，即 cmets 和空格将被删除......但是是的：当 SASS 编写 CSS 时，它能够以缩小格式编写代码.
您的意思是“减少代码”或“避免不需要的代码”，因为您只尝试导入、使用和编写！给定模块中唯一需要的部分，这是一种很好的做法。
.navbar 是一个 CSS 类。 SASS 不加载 CSS 类，它编写 CSS 类。无论您是“将代码自己编写到 SCSS 文件”还是“从框架/模块中获取代码”都没有关系...... SASS 会将准备好的 CSS 类写入您的 CSS 文件。
您的意思是 SASS 包含/导入带有来自框架/模块的代码的文件，以将该代码/类写入 css。所以是的：也许你可以说你“加载”了那个模块/scss文件……但你没有加载为css类。 （这与编码中的“类”一样重要，始终意味着可执行代码的特殊构造，它在您的程序中执行某些操作。CSS 类不执行任何操作，在 SASS 中它们是您想要写入/输出到 css 的内容。）
请：这些措辞对于相互理解和理解 SASS 工作机制的机制很重要。
通过仅导入选定文件来减少代码是一种很好的做法
所以，我不确定我是否正确理解了您的问题：
@import 'somefile.scss'，你总是会得到整个文件的完整代码。正如您提到的，Bootstrap 确实是开发出来的，并且允许您这样做。但是抬头。如果您导入即部分navbar.scss（或其他选定元素），则它仅在您还加载其他文件navbar.scss 依赖时才有效。这几乎是variables、functions、mixins，有时也需要JS components。请注意，导入元素所基于的文件（即 vars、functions、mixins）必须在加载元素（即导航栏、网格等）之前完成。
一种组织项目的方式
是的。组织项目的一个好方法是拥有一个（！！！）文件，它将您自己在其他部分文件中编写的所有代码组合在一起，或者您从其他框架/模块导入。
如果是 Bootstrap，这可以是（简化示例）：
// ###> file: your 'custom.scss'
// Note: file is without leading underscore
// as this files GENERATES/WRITE the css to custom.css
// Files with underscore as _partial-footer-styling.scss
// are not compiled to write css on their own
// that files are only compiled to css when they are imported to files without underscore
@import 'path/your-own-vars';
// Note: technique importing files
// you don't need to write underscore and '.scss'
// Note: function of this file
// the file '_your-own-vars.scss' is to organize you needed vars special to your project
// it includes your own vars and bootstrap vars as well
// --> the Bootstrap vars in this file will overwrite the vars of Bootstrap which will be included next
@import 'bootstrap-path/functions';
@import 'bootstrap-path/variables';
@import 'bootstrap-path/mixins';
@import 'bootstrap-path/your-selected-component-1';
@import 'bootstrap-path/your-selected-component-2';
@import 'bootstrap-path/your-selected-component-3';
...
@import 'path/partial-your-own-additional-css-special-section';
@import 'path/partial-your-own-additional-css-footer-settings';
....
详细说明如何在您的项目中包含和使用 Bootstrap（如果您愿意的话，部分可以这样做）：https://getbootstrap.com/docs/4.6/getting-started/theming/
【讨论】：