Skip to content
This repository has been archived by the owner on Mar 30, 2018. It is now read-only.
/ bulma-loader Public archive

A Webpack loader for Bulma, a modern CSS framework based on Flexbox

Notifications You must be signed in to change notification settings

stipsan/bulma-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 

Repository files navigation

This project is no longer maintained

Contact me if you'd like to take over this project and I'll transfer the git repo and npm package name 😄

Bulma Loader

A Webpack loader for Bulma, a modern CSS framework based on Flexbox

NPM NPM

When should I use this?

If you want to customize Bulma while using it in CSS modules this loader is for you.

For everyone else who just want to customize Bulma in their project or isn't familiar with CSS modules yet follow step 3 in the official docs: http://bulma.io/documentation/overview/start/

Usage

  1. Create a sass file for your Bulma variables.
  2. Add the bulmaLoader after the sass loader.
  3. Configure the loader with the location of your variables file.

Examples

Assuming you put your variables here: ./sass/bulma.sass

Configure by query

{
  test: /\.sass/,
  loaders: ["style", "css?modules&importLoaders=2", "sass", "bulma?theme=sass/bulma.sass"]
}

Configure by loader options

Inside your webpack config object:

{
  [ ... ]
  bulmaLoader: {
    theme: 'sass/bulma.sass'
  },
  loaders: [
    {
      test: /\.sass/,
      loaders: ["style", "css?modules&importLoaders=2", "sass", "bulma"]
    }
  ]
}

Importing customized Bulma CSS

Assuming your style codebase is already split into modules and local by default:

./src/components/Welcome/style.sass

.hero {
  composes: hero is-fullheight is-success is-bold from 'bulma';
}
.hero-content {
  composes: hero-content from 'bulma';
  opacity: .9;
}

.title {
  composes: title is-3 from 'bulma';
}
.subtitle {
  composes: subtitle is-5 from 'bulma';
}

./src/components/Welcome/index.js

import style from './style.sass'

export const Welcome = () => <div className={style.hero}>
  <div className={style['hero-content']}>
    <h1 className={style.title}>Welcome!</h1>
    <h2 className={style.subtitle}>Long time no see :-)</h2>
  </div>
</div>

Importing from 'bulma' will map to ./node_modules/bulma/bulma.sass. You can import from any sass file in bulma by doing this:

.call-to-action {
  composes: button is-primary is-large from 'bulma/sass/elements/button.sass'
}

You can also import from the CSS file directly like this (and it works without bulma-loader):

.call-to-action {
  composes: button is-primary is-large from 'bulma/css/bulma.css'
}

About

A Webpack loader for Bulma, a modern CSS framework based on Flexbox

Resources

Stars

Watchers

Forks

Packages

No packages published