是否可以运行 SCSS 和 Bootstrap，而不使用 VSC 扩展？

Question

我有一个工作设置，通过 npm 安装了 sass 和 parcel bundler。问题是 - 每次我添加 Bootstrap，无论是通过 npm 安装还是自己下载软件包，我的开发服务器（parcel 的运行）都会开始非常滞后。我所做的每一次更改大约需要 7 秒。用于构建服务器。

在Sass安装指南中写道npm安装

runs somewhat slower

所以我尝试按照指南下载软件包并将其添加到我的 PATH 中来安装 Sass，但这没有帮助。我的问题是 - 有人可以确认是否可以运行ning SCSS 和 Bootstrap，而不使用扩展 - 因为目前这是我看到的唯一选择。其他开发人员如何解决这个问题 - 或者我的设置有问题？

PS。当尝试使用 Bootstrap CDN - 服务器停止响应我的 scss 文件，它只响应 html - 这也是我不明白的。

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">
    <title>Document</title>
    <link rel="stylesheet" href="scss/main.scss">
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->

</head>
<body>
    <h1>test</h1>
    <h2>test 1,2</h2>


    <!-- bootstrap CDN : -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> -->
</body>
</html>

main.scss

@import "~bootstrap/scss/bootstrap";

body {
    background-color: rgb(194, 147, 98);
}

package.json

{
  "name": "48.-new-saas-setup",
  "version": "1.0.0",
  "description": "",
  "source": "./src/index.html",
  "scripts": {
    "dev": "parcel",
    "build": "parcel build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.4.1",
    "parcel": "^2.4.1",
    "sass": "^1.50.1"
  },
  "dependencies": {
    "bootstrap": "^5.1.3"
  }
}

文件夹结构：

3 第一台服务器构建 :

Answer 1

感谢您提供详细的再现 - 我可以看到我这边速度变慢了（虽然没有那么剧烈，可能是因为我的 PC 速度更快）。

这是您的应用程序的（简化的）依赖关系图：

index.html => scss/main.scss => node_modules/bootstrap/scss/bootstrap

看起来发生的事情是，每当 main.scss 发生变化时，parcel 就是 re-processing node_modules/bootstrap/scss/bootstrap（导入大量的东西，需要一段时间）。我怀疑这里有一个错误。

但是，您可以通过将依赖关系图更改为以下内容来解决此问题并显着加快速度：

index.html => main.scss
           => boostrap.scss => node_modules/bootstrap/scss/bootstrap

即您将添加一个 boostrap.scss 文件，其唯一的工作就是导入 bootstrap - 在开发中您几乎不需要触及它。

因此您的 index.html 文件将包含这些行：

<link rel="stylesheet" href="scss/bootstrap.scss" />
<link rel="stylesheet" href="scss/main.scss">

main.scss 看起来像这样：

// No bootstrap import here.
body {
    background-color: rgb(220, 147, 20);
}

而 bootstrap.scss 看起来像这样：

@import "~bootstrap/scss/bootstrap";
// Nothing else here.

在我的测试中，当您对 main.scss 进行更改时，这会显着加快 inner-loop 重建。

（我尝试直接从 index.html 导入 ~bootstrap/scss/bootstrap，但由于 this issue 而无法正常工作）。

是否可以运行 SCSS 和 Bootstrap，而不使用 VSC 扩展？

Is it possible to run SCSS and Bootstrap, without using VSC extensions?

sass

twitter-bootstrap

parceljs

bootstrap-5

是否可以 运行 SCSS 和 Bootstrap，而不使用 VSC 扩展？

Is it possible to run SCSS and Bootstrap, without using VSC extensions?

sass

twitter-bootstrap

parceljs

bootstrap-5

是否可以运行 SCSS 和 Bootstrap，而不使用 VSC 扩展？