SCSS文件部分编译成CSS

Question

I use lates Vscode with the extension "live SASS Compiler".我使用扩展名为“live SASS Compiler”的lates Vscode。 I want to use bootstrap, so I linked a style.css file in html, which is supposed to have all the compiled bootstrap.css codes (including mine).我想使用 bootstrap，所以我在 html 中链接了一个 style.css 文件，它应该包含所有已编译的 bootstrap.css 代码（包括我的）。 To customize the Bootstrap theme, I have another style.scss file which imports the local bootstrap.scss file.为了自定义 Bootstrap 主题，我有另一个 style.scss 文件，它导入本地 bootstrap.scss 文件。 Now after the import of local bootstrap.scss file in style.scss, I compiled/transpiled (watched) the scss file into style.css file, which works but partially, only the portion of extra scss code I added is transpiled to css, excluding all the bootstrap.css code.现在，在 style.scss 中导入本地 bootstrap.scss 文件后，我将 scss 文件编译/转换（观察）为 style.css 文件，该文件有效但部分有效，只有我添加的额外 scss 代码部分被转换为 css，排除所有 bootstrap.css 代码。 That's why my html is not getting bootstrap with style.css.这就是为什么我的 html 没有使用 style.css 进行引导。

I am mentioning the portion of code for the simplicty.为了简单起见，我提到了代码部分。 This is the html file:这是 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>

This is style.scss file, I watch/transpile this style.scss into style.css这是 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; 
}

This is the transpiled style.css file (with only the portion of code transpiled):这是转换后的 style.css 文件（仅转换了部分代码）：

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

As you can see the transpiled style.css file doesnt have all the bootstrap css codes, which is why the html is not linked with bootstrap (Bootstrap works only if I link it separately in another link tag).正如您所看到的，转换后的 style.css 文件没有所有引导程序 css 代码，这就是为什么 html 未与引导程序链接的原因（引导程序仅在我将其单独链接到另一个链接标记中时才起作用）。 How do I make it work with style.css for the bootstrap theme customization?如何使其与 style.css 一起用于引导程序主题自定义？

NB Its NPM project, I used NPM to download bootstrap. NB它的NPM项目，我用NPM下载bootstrap。

Answer 1

This is how I get it to work.这就是我让它工作的方式。 I changed the scss file's code to something much simpler and made sure that the bootstrap.scss is located correctly.我将 scss 文件的代码更改为更简单的代码，并确保 bootstrap.scss 的位置正确。 But I changed the path to this @import "/node_modules/bootstrap/scss/bootstrap";但是我改变了这个@import "/node_modules/bootstrap/scss/bootstrap"的路径； I am not sure if it matters but I used bootstrap.scss earlier in the path.我不确定这是否重要，但我在路径的前面使用了 bootstrap.scss。 I dont know if adding/removing the extension (.scss) matters!我不知道添加/删除扩展名 (.scss) 是否重要！ I also installed SASS from NPM globally, thats why, I am still not sure what exactly made it right - the code in scss file or the extension in the path!!我还在全球范围内从 NPM 安装了 SASS，这就是为什么，我仍然不确定到底是什么使它正确 - scss 文件中的代码或路径中的扩展名！

SCSS文件部分编译成CSS

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-07-26 06:53:34

SCSS文件部分编译成CSS

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-07-26 06:53:34

解决方案1
0 已采纳 2021-07-26 06:53:34