css - 如何入门NodeJS和Sass元素，这样我就可以自定义bootstrap 4主题了

Question

我想自定义 Bootstrap 4 主题，例如颜色、字体等。

我从 Bootstrap 网站上看到说明说我需要创建 custom.scss 文件并像这样导入 Bootstrap 的源 Sass 文件

// Custom.scss

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

我是 Sass 和 NodeJS 的新手，我不知道如何开始 NodeJS 和 Sass 元素。

我使用 brew 在我的 Mac 上安装了 NodeJS 和 Sass。我还通过键入以下命令安装了 Bootstrap:

npm install bootstrap

这是我取得的最大进步。当我执行命令 npm install bootstrap 时，我不知道 Bootstrap 文件安装在哪个路径中，我也不知道如何将该 Bootstrap 安装到我的元素文件夹中。

任何人都可以提供一些信息或指向有关如何开始使用 NodeJS 和 Sass 元素的资源，以便我可以使用 Sass 自定义 Bootstrap 4 主题。

Answer 1

您必须在元素目录中运行 npm install bootstrap 命令。 Bootstrap 及其文件随后将安装到元素目录内的目录 node_modules/bootstrap 中。

现在，当您将自定义 scss 文件放入此文件夹时，它们将能够访问 node_modules 目录，bootstrap 就在其中。

然后，您可以使用 npm 工具创建自定义构建管道，以将 scss 文件编译为 css。这需要对 node.js 和 NPM 有更深入的了解，但这是通常和推荐的做法。

如果你只想编译一次 scss 并从那里使用 css 而不必更深入地使用 node.js，你可以使用像 scss-compile 这样的包然后使用 node-sass -rw scssFiles -o cssOutputFiles 等控制台命令来编译您的自定义主题一次。