Bootstrap partial Sass

Bootstrap is a component-based library for developing web UI. Not all components are used when developing frontend with Bootstrap. In order to minimize the number of unused styles in a project, create a single sass file with custom imports of bootstrap components. Start with adding bootstrap as npm/yarn dependency, copy contents of a bootstrap.scss (defined in bootstrap/sass directory of node_modules) to a new file and change the imports path accordingly. The following is an example of the sass file that imports some bootstrap components:

// styles/bootstrap/_bootstrap.scss 
// Import constants overrides 
@import './constants;

// Import bootstrap components 
@import '~bootstrap/scss/functions'; 
@import '~bootstrap/scss/variables'; 
@import '~bootstrap/scss/mixins'; 
@import '~bootstrap/scss/root';

// styles/bootstrap/_constants.scss 
$body-bg: red;

The ~ (tilde) is used for resolving from node_modules and is supported by sass-loader (webpack). For ember.js use ember-cli-bootstrap-sassy dependency, but without the tilde prefix.

ESLint

ESLint is code linting utility for JavaScript. Code linting is a static code analysis that is used to find potential problems and can enforce code style guides. To use ESLint, start by installing it with npm install -g eslint and creating an .eslintrc file for configuration. Run a check against a file with eslint src/some-file.js. ESLint can be integrated with various editors like Sublime Text, Atom and VSCode via plugins where one can get instant feedback on the code and make necessary changes.

Whenever you start a new project, start by using ESLint and adhere to its rules.


“Bootstrap partial Sass & ESLint” Tech Bite was brought to you by Kenan Klisura, Lead Software Engineer at Atlantbh. 

Tech Bites are tips, tricks, snippets or explanations about various programming technologies and paradigms, which can help engineers with their everyday job.

Protractor parallel execution
QA/Test AutomationTech Bites
May 12, 2023

Protractor parallel execution

Why Parallel Testing? When designing automation test suites, the ability to run tests in parallel is a key feature because of the following benefits: Execution time - Increasing tests efficiency and, finally, faster releases Device compatibility - There are many devices with various versions and specifications that need to be…
Introduction to GraphQL
QA/Test AutomationTech Bites
May 11, 2023

Introduction to GraphQL

In today's Tech Bite topic, we will get familiar with GraphQL and explain its growth in popularity in recent years as the new standard for working with APIs. What is GraphQL? GraphQL stands for Graph Query Language. It is an API specification standard and, as its name says - a…

Leave a Reply