css - 如何开始使用 NodeJS 和 Sass 项目,这样我就可以自定义 bootstrap 4 主题
问题描述
我想自定义 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 时,我不知道引导文件安装在哪个路径中,而且我也不知道如何将引导程序安装到我的项目文件夹中。
谁能提供一些信息或指向我有关如何开始使用 NodeJS 和 Sass 项目的资源,以便我可以使用 Sass 自定义 Bootstrap 4 主题。
解决方案
您必须npm install bootstrap
在项目目录中运行该命令。然后引导程序及其文件将安装到node_modules/bootstrap
项目目录中的目录中。
现在,当您将自定义 scss 文件放入此文件夹时,他们将能够访问node_modules
引导程序所在的目录。
然后,您可以使用 npm 工具创建自定义构建管道,以将 scss 文件编译为 css。这需要对 node.js 和 NPM 有更深入的了解,但这是通常的推荐方式。
如果您只想编译一次 scss 并从那里使用 css 而不必更深入地使用 node.js,您可以使用像scss-compile这样的包,然后使用控制台命令node-sass -rw scssFiles -o cssOutputFiles
来编译您的自定义主题一次。
推荐阅读
- swift - Xcode 搜索栏对更改文本或取消单击没有反应
- wordpress - Wordpress 清除页面模板的模板缓存?
- linux - Git克隆/从Windows拉到本地网络中的树莓派
- laravel - 我认为可以分解的控制器逻辑中的分解辅助
- python - ValueError:形状 (None, 9) 和 (None, 10) 不兼容
- python - cmake 无法在 conda 环境中找到 boost python
- c# - 跟踪、调试和信息消息未从 WorkerService 到达 App Insights
- haskell - 围绕 IO 创建一个包装器 Monad
- debugging - 在 VS Code 中使用 Docker-compose 调试 Odoo
- r - 将数据框中的所有数字列四舍五入为不同的位数