arrow_backward Back to blog

Importing Basscss From NPM In Ionic 2

Ionic 2 applications come with quite a bit of theming built in by default, like utility attributes, Sass variables, and even a grid layout based on flexbox. But, there are times when you may need to get even more granular, using modular CSS utility classes. This is where Basscss can help. Basscss is a low-level CSS toolkit, giving app developers an additional layer of tools when it comes to styling their applications. Let’s take a look at how you could setup Basscss to work with your Ionic 2 project.

Dependencies

First, you need to have the dependencies installed. You’ll need npm, and after you have npm installed, you can use it to install Cordova and Ionic:

npm install -g cordova

npm install -g ionic

Next, create an Ionic app using Ionic 2:

ionic start myNewApp --v2

You can then open the myNewApp directory, and check that your app shell is running with:

cd myNewApp

ionic serve

Basscss Install

We’re going to use the Sass version of Basscss, so it will integrate with Ionic’s existing Sass setup nicely:

npm install basscss-sass --save

If you open the package.json file in your project root, you’ll now see a line for basscss-sass in the dependencies block. If you open the node_modules/basscss-sass/scss directory, you’ll find a whole bunch of modules, and one root file named “basscss.scss” that imports the modules.

How do we go about importing these files into our Ionic app? Ionic 2 apps use node-sass for compilation, which we can determine by opening the file at:

node_modules/@ionic/app-scripts/config/sass.config.js

If you open this file, you’ll see a block for “includePaths”, which is how we can specify additional directories to include during compilation. However, we don’t want to edit this file directly; it’s in our node_modules directory and we wouldn’t want our changes to be overwritten, nor is this directory typically included in repos.

Instead, copy the entire contents of the sass.config.js file, and paste them into a new file located in your app root, in a new directory named “config”:

config/sass.config.js

Once you have the default sass.config.js file, add a new line to the includePaths array that points to the new basscss-sass directory:

node modules

Next, we need to tell our app about our new custom config file. Back in our app’s package.json file, add a new block called “config” that specifies the location of our new config file:

Ionic-sass

We can now import the Sass modules like normal in our app/app.scss file:
sass-modules

To test that everything is working, make sure you’ve launched your app in a browser:

ionic serve

And then add one of the Basscss classes to the H2 element in src/pages/home/home.html:

h2 code

You’ll see the browser window automatically refresh with the header element italicized.

The precedence with which we should use all the available styling options to make our app’s CSS as modular as possible should likely be:

  1. Ionic variable overrides
  2. Ionic utility attributes
  3. Basscss utility classes
  4. Component styles in the Angular component (a topic for another day)
  5. Our own modular Scss files in the app/src directory

Hopefully this helps you get setup with one of the most flexible modular CSS architectures for your Ionic 2 projects!

arrow_backBack

New Project Request













Top