Mac系统使用VS Code编译Bootstrap 4

simpleapples 发布于2019-04-23 13:29 / 405人阅读

摘要：使用，已改为使用，所以首先解决编译问题。编译与无关，需要在系统中安装编译环境。使用编译源码结构简单分析源码，其中文件夹包含了所有样式文件源码，部件和工具都是多带带的文件，很清晰。可以看到命令已成功运行，及文件已经生成。

环境：
macOS 10.13.6
node.js 8.11.3
sass 1.10.3
bootstrap 4.1.3
vs code 1.25.1

Bootstrap3为我们提供了在线编译工具，可以方便的调整变量，然后在线编译得到我们想要的CSS文件。Bootstrap 4 不知出于什么考虑，官网一直没有提供类似的在线工具，完成自定义后必须自己解决编译问题。Bootstrap 3 使用LESS，Bootstrap 4已改为使用SASS，所以首先解决SASS编译问题。SASS编译与VS Code无关，需要在Mac系统中安装SASS编译环境。

1. 安装node.js

从node.js官网下载for macOS安装包，安装node.js会同时安装npm包管理工具。

安装完成后，可以使用终端命令：

node -v

查看node.js是否安装成功。

sudo npm install npm@latest -g

更新npm版本。

2. 安装SASS编译工具

微软官方文档使用node-sass，终端命令：

sudo npm install -g node-sass less

但我始终没有尝试成功，无论是切换至root帐号还是使用国内镜像安装，都失败了，搭梯子也没用。要么是permission denied，要么是缺少python2环境，总之问题一大堆。

能够编译SASS的工具很多，换一个试试：

sudo npm install -g sass

这次很顺利，一次搞定。下面测试一下SASS是否能够正确编译。

新建一个空文件夹同时创建一个style.scss文件，输入测试代码：

$padding: 6px;

nav {
  ul {
    margin: 0;
    padding: $padding;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: $padding 12px;
    text-decoration: none;
  }
}

使用终端命令编译测试文件：

sass source/stylesheets/style.scss build/stylesheets/style.css

编辑成功后会得到我们预期的CSS文件：

nav ul {
  margin: 0;
  padding: 6px;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/*# sourceMappingURL=styles.css.map */

SASS同时还为我们生成了map文件：

SASS编译环境已安装完成，VS Code就可以调用系统命令对SASS进行编译了。

3. 使用VS Code 编译 Bootstrap 4

1) Bootstrap4源码结构

简单分析Bootstrap4源码，其中SCSS文件夹包含了所有样式文件源码，部件和工具都是多带带的scss文件，很清晰。其中两个文件是需要留意。一个是bootstrap.scss，里面import了所有部件和工具，我们只需针对此文件编译即可得到完整的css文件；另一个是_variables.scss，里面定义了所有变量，如果要自定义样式，我们只需更改其中的变量即可。

2) 创建工作目录

Copy BS4源码其中的SCSS文件夹至工作目录，并新建一个custom.scss文件。目录结构：

bootstrap Custom
    |-- scss
    |-- custom.scss

scss文件夹存放BS4源码，为避免直接修改源码中的变量，我们将自定义变量放在custom.scss文件中。BS如果有升级，我们只需替换scss文件夹即可。

打开VS Code，打开工作文件夹，编辑custom.scss：

$theme-colors: (
  "gray": #6c7074
);

@import "scss/bootstrap";

文件最后import了scss文件夹中的bootstrap.scss文件，它含了bootstrap所有部件。

也可以多带带引用指定部件：

// 必须
@import "scss/functions";
@import "scss/variables";
@import "scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// 可选
@import "scss/root";
@import "scss/reboot";
@import "scss/type";
...

3) 创建VS Code任务

打开命令面板（⇧⌘B），选择“Tasks: Run Task” - 选择“配置任务...” - 选择“使用模版创建tasks.json文件” - 选择“Others”。上面步骤会创建tasks.json文件，我们可以对task进行配置：

label是任务名，command是sass编译命令，其与终端命令是一致的。

4) 完成编译

打开命令面板（⇧⌘B），运行我们的“Sass Compile”的任务。可以看到命令已成功运行，CSS及map文件已经生成。

4. 简单体验Bootstrap 4自定义

我的示例中为bootstrap添加了一个新的主题颜色：

$theme-colors: (
  "gray": #6c7074
);

编译后bootstrap会将新的主题颜色应用到相应的部件上，例如按钮：

// bootstrap.css

.btn-gray {
  color: #fff;
  background-color: #6c7074;
  border-color: #6c7074;
}
.btn-gray:hover {
  color: #fff;
  background-color: #5a5d60;
  border-color: #53575a;
}
.btn-gray:focus, .btn-gray.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 112, 116, 0.5);
}
...

btn-gray 就是根据我们自定义主题颜色而生成的新样式，同样background，text部件也会增加相应的gray样式。我们在编码的时候就能使用自定义样式了。

显示效果：

是不是很棒，一个变量搞定一切。

参考：

https://code.visualstudio.com/Docs/languages/CSS
http://sass-lang.com/install

专线服务服务器托管 VS Code如何 VS Code 可以在浏览器运行了？微软 vs 编译webrtc vs编译webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1948.html

使用VS Code调试MySQL

摘要：简称是由微软开发的，同时支持和操作系统的开源文本编辑器。接下来，为项目配置调试参数。这种方式用在目标变量达到某条件时触发断点，其余则跳过继续执行。和都支持远程调试，这里以为例。作者：洪斌简介 MySQL调试是探索MySQL源码的基本技能，之前介绍过如何使用LLDB调试MySQL，但命令行操作不便，在编辑器和终端之间来回切换，查看代码不便，本文将介绍在Mac OS中如何使用VS Co...

Y3G 2019-07-31 18:08 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

kamushin233 2019-08-29 12:34 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

TNFE 2019-08-05 11:16 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

yy736044583 2019-08-20 16:31 评论0 收藏0