Mac system using vs code compiling bootstrap 4

Environment:
MacOS 10.13.6
node. js 8.11.3
Sass 1.10.3
Bootstrap 4.1.3
VS Code 1.25.1

BOOTSTRAP3 provides us with an on-line compilation tool that allows you to easily tweak variables and compile the CSS files we want online. Bootstrap 4 I do not know for what reason, the official website has not provided similar online tools, the completion of customization must solve the problem of the compilation itself. Bootstrap 3 uses Less,bootstrap 4 has changed to use sass, so the sass compilation problem is resolved first. Sass compilation has nothing to do with VS code and requires installing the Sass compilation environment on Mac systems.

1. Install node. js

Download the for MacOS installation package from the node. JS website and install node. js to install the NPM Package management tool.

After the installation is complete, you can use the terminal command:

Node-v

See if node. js is installed successfully.

sudo npm install [email protected]-G

Update the NPM version.

2. Installing the SASS Compilation tool

Microsoft Official documents using Node-sass, Terminal command:

sudo npm install-g node-sass Less

But I never tried to succeed, either switching to the root account or using a domestic mirror to install, failed, the ladder is useless. Either the permission denied, or the lack of python2 environment, in short, a lot of problems.

There are a lot of tools to compile sass, for one try:

sudo npm install-g sass

It's going to be a smooth one. Let's test to see if sass compiles correctly.

Create a new empty folder while creating a Style.scss file, enter the test code:

$padding: 6px;nav {  ul {    0;    padding: $padding;    List-style:none;  }  Li {display:inline-block;}  a {    display:block;    padding: $padding 12px;    Text-decoration:none;}  }

To compile the test file using the terminal command:

Sass Source/stylesheets/style.scss Build/stylesheets/style.css

The editor will get the CSS file we expected after the success:

nav ul {  0;  padding:6px;  List-style:none;} Nav li {  display:inline-Block;} Nav a {  display:block;  PADDING:6PX 12px;  Text-decoration:none;} /* */

Sass also generated a map file for us:

Sass The compilation environment is already installed, VS code can call the system command to compile the sass.

3. Using vs Code compilation Bootstrap) BOOTSTRAP4 source structure

Simple analysis BOOTSTRAP4 source code, wherein the SCSS folder contains all the style file source code, parts and tools are separate scss files, very clear. Two of these files are to be noted. One is bootstrap.scss, the import of all parts and tools, we only need to compile for this file to get the full CSS file, and the other is _ VARIABLES.SCSS, which defines all the variables, if you want to customize the style, we just need to change the variables.

2) Create a working directory

Copy BS4 Source Scss folder to the working directory, and create a new Custom.scss file. Directory structure:

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

Scss folder to store BS4 source code, in order to avoid directly modifying the source of variables, we put the custom variable in the Custom.scss file. BS If there is an upgrade, we just need to replace the Scss folder.

Open vs Code, open working folder, edit custom.scss:

$theme-colors: (  "Gray""scss/bootstrap" ;

The file finally imports the Bootstrap.scss file in the Scss folder, which contains all the bootstrap parts.

You can also reference a specified part individually:

//must be@import"scss/functions"; @import"Scss/variables"; @import"Scss/mixins"; $theme-colors:map-remove ($theme-colors,"Info"," Light","Dark");//options available@import"Scss/root"; @import"Scss/reboot"; @import"Scss/type";...

3) Create vs Code task

Open the command panel (?? B), select "Tasks:run Task"-Select "Configure Task ..."-select "Create Tasks.json file with template"-select "Others". The above steps create a Tasks.json file, and we can configure the task:

The label is the task name, and the command is the Sass compiler, which is consistent with the terminal command.

4) Complete the compilation

Open the command panel (?? B), run our "Sass Compile" task. You can see that the command has been run successfully, and the CSS and map files have been generated.

4. Simple Experience Bootstrap 4 custom

In my example, I added a new theme color for bootstrap:

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

After compiling, Bootstrap will apply the new theme color to the corresponding part, such as a button:

 //  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 is a new style created from our custom theme colors, and the same Background,text widget adds the corresponding gray style. We can use the custom style when we encode it.

Display effect:

Isn't it great to have a variable to fix everything.

Mac system using vs code compiling bootstrap 4