将 SCSS 文件部分编译成 CSS答案

【问题标题】：Partial Compiling of SCSS file into CSS将 SCSS 文件部分编译成 CSS
【发布时间】：2021-10-01 20:43:48
【问题描述】：

我使用带有扩展“live SASS Compiler”的lates Vscode。我想使用bootstrap，所以我在html中链接了一个style.css文件，它应该有所有编译好的bootstrap.css代码（包括我的）。为了自定义 Bootstrap 主题，我有另一个 style.scss 文件，它导入本地 bootstrap.scss 文件。现在在 style.scss 中导入本地 bootstrap.scss 文件后，我将 scss 文件编译/转译（观看）到 style.css 文件中，该文件有效但部分，只有我添加的额外 scss 代码部分被转译为 css，不包括所有 bootstrap.css 代码。这就是为什么我的 html 没有使用 style.css 进行引导。

为了简单起见，我提到了代码部分。这是html文件：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap Site</title>
  <link rel="stylesheet" href="/src/css/style.css" />
</head>

这是 style.scss 文件，我观察/转换这个 style.scss 到 style.css

@import url(/node_modules/bootstrap/scss/bootstrap.scss);
$bg-color: rgb(221, 204, 117);
$font-color: rgb(170, 12, 12);
body {
  background-color: $bg-color;
  color: $font-colo; 
}

这是转译后的 style.css 文件（仅转译了部分代码）：

@import url(/node_modules/bootstrap/scss/bootstrap.scss);
body {
  background-color: #ddcc75;
  color: #aa0c0c;
}

如您所见，转译后的 style.css 文件没有所有引导 css 代码，这就是为什么 html 没有与引导程序链接的原因（引导程序仅在我在另一个链接标签中单独链接时才有效）。如何使其与 style.css 一起用于引导主题自定义？

注意它的npm项目，我用npm下载bootstrap。

【问题讨论】：

能否将导入行改为：@import "~bootstrap/scss/bootstrap";，然后重新编译检查？
thnx 但不起作用，它给出“编译错误错误：找不到要导入的样式表。”

标签： visual-studio-code bootstrap-4 sass live-sass-compiler

【解决方案1】：

这就是我让它工作的方式。我将 scss 文件的代码更改为更简单的代码，并确保 bootstrap.scss 的位置正确。我发现的一个问题是，无论您做什么，最后都必须@import 引导文件。我不知道如何只导入必要的文件。

// 2. Include any default variable overrides here
$body-color: rgb(238, 79, 30);
$body-bg : rgb(230, 224, 224);

// // 3. Include remainder of required Bootstrap stylesheets
@import  "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";


$custom-theme-colors: (
"altlight": rgb(189, 163, 194),
"altdark" : rgb(170, 90, 163)
);

$theme-colors : map-merge($custom-theme-colors , $theme-colors );

@import "../../node_modules/bootstrap/scss/bootstrap";

【讨论】：