0

例如，我试图.navbar-nav从引导程序_navbar.scss而不是整个_navbar.scss文件导入到我编译的 css 文件中。有没有办法做到这一点？

抱歉，如果之前有人问过这个问题。

4

3 回答 3

1

在您学习 Sass 时，这里有一些可能会有所帮助的解释：

更好的措辞有助于...

首先，一些措辞可以在这里和您谈论编码的任何其他地方获得正确的可理解的沟通：

  1. SASS 没有minify给定的 CSS，它编写 CSS。缩小意味着给定的 CSS 代码被后处理器压缩到更短的方式来编写它的过程，即注释和空格将被删除......但是是的：当 SASS 编写 CSS 时，它能够以缩小格式编写代码.

  2. 您的意思是“减少代码”或“避免不需要的代码”，因为您只尝试导入、使用和编写！给定模块中唯一需要的部分，这是一个很好的做法。

  3. .navbar是一个 CSS 类。SASS 不加载 CSS 类，它编写 CSS 类。无论您是“自己将代码写入 SCSS 文件”还是“从框架/模块获取代码”都没有关系…… SASS 将准备好的 CSS 类写入您的 CSS 文件。

  4. 您的意思是 SASS 包含/导入带有来自框架/模块的代码的文件，以将该代码/类写入 css。所以是的：也许你可以说你“加载”了那个模块/scss文件……但你没有加载为css类。（这与编码中的“类”一样重要，始终意味着可执行代码的特殊构造，它在您的程序中执行某些操作。CSS 类不执行任何操作，在 SASS 中它们是您想要写入/输出到 css 的内容。）

拜托：这些措辞对于相互理解和理解 SASS 工作的机制也很重要。

通过仅导入选定的文件来减少代码是一种很好的做法

所以，我不确定我是否正确理解了你的问题：

  1. 不可以。您不能仅包含/导入/加载单个 scss 文件的部分代码。如果你这样做@import 'somefile.scss'，你总是会得到整个文件的整个代码。
  2. 是的。您可以包含/导入/加载给定框架/模块的部分，因为您只能加载项目所需的框架/模块的特殊文件（！）。
  3. 是的。这是一个非常好的做法。

正如您提到的，Bootstrap 确实已经开发并允许您这样做。但是抬头。如果您导入即零件navbar.scss（或其他选定元素），则它仅在您还加载其他文件navbar.scss依赖时才有效。这几乎是variables, functions,mixins有时也需要JS components这个元素。请注意，导入元素所基于的文件（即变量、函数、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/

于 2021-03-26T09:45:37.947 回答
1

您可以尝试进行扩展：

.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;
}
于 2021-03-26T01:15:17.743 回答
1

在 javascript 中导入 .scss 的一种方法是

import { navbar-nav } from '_navbar.scss'

在您的组件中使用时，您可以这样做。

<div className={navbar-nav} />

如果你想将它导入到你的 .scss 文件中，那么你可以这样做。

@import '_navbar.scss'

.class {
  @extend .navbar-nav
}
于 2021-03-26T03:44:09.597 回答