【bootstrap5】使用VSCode插件编译Sass文件修改默认颜色

最新推荐文章于 2024-07-02 19:58:27 发布
最新推荐文章于 2024-07-02 19:58:27 发布
阅读量766 收藏
点赞数
分类专栏： Web 文章标签： vscode sass ide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boulete/article/details/127961990
版权
本文介绍了如何通过VSCode的Live Sass Compiler插件，轻松编译Bootstrap5的Sass文件，特别是修改默认颜色。只需下载Bootstrap资源包，安装插件，打开scss文件，修改变量，点击编译按钮，即可实时看到颜色变化，方便快捷。
摘要由CSDN通过智能技术生成

前言

网上有若干使用npm安装编译工具来修改参数（比如默认颜色）的案例，无奈失败好多回，才发现VSCode有这么个好东西。
在这里插入图片描述
话不多说马上开始。

步骤

1、下载bootstrap5资源包

想要开车，首先得有车，先把bootstrap5的资源包下载下来，具体下载和使用方法这里不赘述，只将github链接放在这里：GitHub - bootstrap

2、安装VSCode插件

安装Live Sass Compiler插件或者其他的编译插件，这里以Live Sass Compiler为例。

3、打开bootstrap资源文件夹到工作区

在这里插入图片描述

4、打开scss文件夹中的_variables.scss文件

对其中的主题色进行修改：

//修改前
$primary
最低0.47元/天 解锁文章
胖胖中式小笼包
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vscode引用Bootstrap插件
陌小柠的博客
12-10 7779
Bootstrap的引用 1.先在官网下载好bootstrap-3.4.1.zip,然后解压 2.在本地Vscode的代码存放目录下建立文件bootstrap 3.在Vscode中打开刚才新建的文件bootstrap 4.打开文件后，在bootstrap下再建立bootstrap-3.4.1文件 5.右键，选择文件资源管理器，打开bootstrap-3.4.1文件 6.将前面第1步解压好的bootstrap-3.4.1文件中的所有东西（css,font,js）复制到Vscode的bootstra
[Scss转Css]:使用VSCode插件[Live Sass编译器]
SUZEHUI9636的博客
01-04 1379
当需要将Sass或Scss文件编译成Css文件时，可以使用到VSCode中一个非常便捷的插件。
VScode 常用插件
前人栽树，后人乘凉。
07-02 743
综上所述，无论是提高开发效率的功能插件，还是提升视觉体验的外观插件，都能在Visual Studio Code中找到合适的选择。这些插件不仅涵盖了代码编辑、调试、实时预览等多个方面，还包括了对流行前端框架的支持。同时，通过合理的配置和使用快捷键，可以进一步提升使用体验。
VS Code 安装sass插件
weixin_30807779的博客
04-09 627
准备工作 在VS Code上新建一个项目,例：SASS ，文件夹内包括css 和 sass 和 html 文件夹 在sass文件下新新建sass.scss 1.在拓展商店里搜索“easy sass”，并安装，安装成功后点重新加载。 2.接下来进行配置： 在 vs code 菜单栏依次点击“文件 首选项 设置”，打开 settings.json 全局配置文件。搜索“...
推荐开源项目：VSCode SCSS 插件
gitblog_00087的博客
06-05 428
推荐开源项目：VSCode SCSS 插件 vscode-scss:electric_plug: IntelliSense for Variables, Mixins and Functions in all Sass (SCSS syntax only) files.项目地址:https://gitcode.com/gh_mirrors/vs/vscode-scss 在前端开发中，SCSS（S...
【git】git常用命令及场景
Nonoas的博客
09-09 238
Idea .gitignore不起作用 git rm -r --cached . git add . git commit -m 'update .gitignore'
Bootstrap fileinput文件上传预览插件使用详解
01-19
通过本文，你可以学习到如何封装或者开发一个前端组件，同时学习Bootstrap-fileinput组件的使用，封装后使用更加简单方便。 BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持 支持多文件、...
bootstrap datepicker插件默认英文修改为中文
12-04
datepicker插件默认为英文，而且格式为：mm/dd/yyyy这种情况，看起来不怎么直观。 修改目标： 1、默认显示为中文  2、格式为：yyyy年mm月dd日  需要修改两个地方： 1、更改datas对象， 增加zh-cn语言选项；参见源...
文件上传插件bootstrap File
08-01
Bootstrap File Input是一款流行的文件上传插件，它专为基于HTML5的文件上传设计，具有高度可定制性和良好的用户体验。这款插件充分利用了Bootstrap框架的样式，使得文件上传组件与Bootstrap主题保持一致，提供了...
bstudio-sass：Bootstrap Studio的SASS编译助手
02-05
Bootstrap Studio SASS同伴bstudio-sass是用于在Bootstrap Studio中编译SASS的帮助程序实用程序。 要使用它，请将其安装在本地计算机上，并配置Bootstrap Studio以知道在哪里可以找到它。 它可以在Windows，MacOS和...
datetimepicke 一个好用的Bootstrap日历时间插件压缩包文件
最新发布
07-06
bootstrap-datetimepicker是一个简单好用的日历时间插件，在bootstrap首页上也有推荐。可支持日期、小时的时间选择。使用起来也很简单，主要有如下几个步骤。 1，必须引入Jquery文件。 2，引入日历插件JS代码：...
vscode的Easy Sass插件：保存SASS/SCSS文件的时候，自动编译为css文件
听海边涛声
05-07 392
vscode的Easy Sass插件：保存SASS/SCSS文件的时候，自动编译为css文件
vscode中的sass插件_VS Code 安装sass插件
weixin_30093159的博客
01-30 997
准备工作在VS Code上新建一个项目,例：SASS ，文件夹内包括css 和 sass 和 html 文件夹 在sass文件下新新建sass.scss1.在拓展商店里搜索“easy sass”，并安装，安装成功后点重新加载。2.接下来进行配置： 在 vs code 菜单栏依次点击“文件 首选项 设置”，打开settings.json 全局配置文件。搜索“easysass”，然后把 eas...
vscode安装easy sass插件
wendyzhouwendy的博客
03-27 683
vscode安装easy sass插件，使用的时候提示错误 ：EasySass: could not generate CSS file. See Output panel for details.
vscode css提示_锋利码农武器之vscode
weixin_39650745的博客
11-23 641
俗话说，工欲善其事必先利其器，我们码农的器是什么尼？没错，就是我们亲爱的IDE，前端开发者最爱的编辑器应该是vscode了吧。但是我们要怎么去锋利它尼？不外乎就是熟悉它的使用方法、快捷键以及第三方的插件。接下来，我整理了一些vscode常用的快捷键以及常用插件，希望可以帮助各位码农锋利自己的武器。快捷键器篇窗口文件相关快捷键新建文件Ctrl+N文件之间切换贴Ctrl+Tab打开一个新的V...
vs code 常用插件
萝卜芹菜芽
05-09 1019
===================== vs code ===================== 1. vscode-icons 2. Live Server 2. highlight-matching-tag 4. Auto Close Tag 5. Auto Rename Tag 启动本地服务 6. Path Autocomplete 路径提示 ====...
vscode配置html_VScode，最适合前端开发的环境
weixin_39595164的博客
11-20 7712
日常安利在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。都不用我安利VS code，大家就会乖乖的去用，就算你不用，我也要强势安利我是来给大家安利插件的，想做个比较全面的插件集合给大家。我结合最近的情况，总结一下，也单独写介绍适合Python新手学习的插件，让你事半功倍。比心❤。强大特点VS vode特点：开源，免费自定义配置集成git智能提示强大支持...
vscode中的sass插件_VSCode 中的热门好使的 React 代码生成插件
weixin_32432759的博客
12-24 104
一、前言有一些代码，基本固定成套，若不使用代码模板，将是一个耗时无益的操作。二、安装搜索react，如图所示，便是reac代码生成插件： 三、使用下面分享几个常用的代码生成代号1.imrc完成react基本依赖导入import React, { Component } from 'react'2.rcc生成有状态的组件代码块import React, { Component } from 'rea...
VS Code编译sass的插件安装
03-28 243
VS Code编译sass的插件安装
bootstrap5 vscode插件
07-25
对于在VSCode中使用Bootstrap的问题，你可以通过以下步骤来安装和使用Bootstrap插件： 1. 打开VSCode，并在左侧的侧边栏中选择“扩展”图标。 2. 在搜索栏中输入“Bootstrap”并按下Enter键。 3. 从搜索结果中选择一个适合你的Bootstrap插件，例如“Bootstrap 4 & Font awesome snippets”或“Bootstrap 4 CDN Snippet”。 4. 点击插件旁边的“安装”按钮进行安装。 5. 安装完成后，你可以在HTML文件中使用Bootstrap的代码片段。例如，输入“bs4-container”然后按下Tab键，将会自动生成一个Bootstrap容器的代码。 6. 如果你想使用在线引用方式，可以在HTML文件中引入Bootstrap的CSS和JavaScript文件。你可以使用以下代码片段： ```html <!-- 引入 Bootstrap 的 CSS 文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- 引入 Bootstrap 的 JavaScript 文件 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> ``` 请注意，这里使用的是Bootstrap 4的CDN链接，你也可以根据需要选择其他版本的Bootstrap。 希望这些信息对你有帮助！\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [Vscode引用Bootstrap插件](https://blog.csdn.net/weixin_46555054/article/details/121854001)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值