Nuxt-bulma-slim NPM

nuxt-bulma-slim

Nuxt.js module to automatically make a slim Bulma build of used features with Purgecss. Simply drop in this module and save precious kilobytes. Also gets rid of annoying warnings for you.

Demo

Setup

Install the dependency:

npm install nuxt-bulma-slim

Add it to the modules section of nuxt.config.js:

{
  modules: [
    'nuxt-bulma-slim'
  ]
}

Or with custom options:

{
  modules: [
    [
      'nuxt-bulma-slim',
      {
        variablesPath: 'assets/scss/my-variables.scss',
        additionalPaths: ['assets/scss/component-styles.scss']
      }
    ]
  ]
}

Options

`srcGlobs`

This is an Array of glob paths. These paths can be absolute or relative to the Nuxt App srcDir option. The Array is passed to Purgecss' content option.

Default

srcGlobs = [
  '<Nuxt App srcDir>/layouts/**/*.vue',
  '<Nuxt App srcDir>/pages/**/*.vue',
  '<Nuxt App srcDir>/components/**/*.vue'
]

`variablesPath`

This is a String of a path to a .sass/.scss file that contains variables. Use this file to overwrite Bulma's variables.

Note that the path can be absolute or relative to the Nuxt App srcDir option and must be a .sass or .scss file.

For convenience this module checks if one of these files exists and automatically set the variablesPath option if you haven't set it already:

<Nuxt App srcDir>/assets/sass/variables.sass
<Nuxt App srcDir>/assets/scss/variables.scss

Default

variablesPath = null // if none of the above files exist, or ...
variablesPath = '<Nuxt App srcDir>/assets/sass/variables.sass' // or ...
variablesPath = '<Nuxt App srcDir>/assets/scss/variables.scss'

`sassTempPath`

This is a String of a path to the temporary .sass file that will be consumed by Nuxt.

Default

sassTempPath = '<Nuxt App rootDir>/.tmp/nuxt-bulma-slim.sass'

`cssTempPath`

This is a String of a path to the temporary .css file that will be consumed by Nuxt.

Default

cssTempPath = '<Nuxt App rootDir>/.tmp/nuxt-bulma-slim.css'

`disablePostCSSWarnings`

This is a Boolean to disable PostCSS warnings when compiling Bulma's SASS to CSS. If true, it will set this option in the Nuxt settings:

{
  build: {
    postcss: {
      plugins: {
        'postcss-custom-properties': {
          warnings: false
        }
      }
    }
  }
}

Check out the related issue.

Default

disablePostCSSWarnings = true

`whitelist`

This is an Array of whitelisted selectors and is given to Purgecss' whitelist option.

Note that html and body are already whitelisted by this module.

Default

whitelist = []

`whitelistPatterns`

This is an Array of whitelisted selectors based on RegEx and is given to Purgecss' whitelistPatterns option.

Default

whitelistPatterns = []

`whitelistPatternsChildren`

This is an Array of whitelisted children selectors based on RegEx and is given to Purgecss' whitelistPatternsChildren option.

Default

whitelistPatternsChildren = []

`additionalPaths`

This is an Array of additional .sass/.scss/.css paths that will be bundled along with the variablesPath and the Bulma build. This is useful if you want to bundle 3rd party libraries like Buefy that depend on Bulma.

Default

additionalPaths = []

How does it work?

In development mode (nuxt dev) a temporary .sass file is written with your defined variablesPath, the complete Bulma features, and any additionalPaths.

Temporary files are written to the Nuxt's rootDir in the .tmp folder.

This .sass file is then injected into the css Array of Nuxt. Since Nuxt can compile SASS, it will also automatically hot-reload your styles when you change your variables or additional paths content.

In production mode (nuxt build/nuxt start & nuxt generate), this module will bundle the SASS just like in development. Additionally it will compile the SASS to CSS.

This CSS is then run thru Purgecss to minify it, then it is written to a temporary .css file and injected into Nuxt's css Array.