Nimble Polyglot Microcosm

    nuxt-bulma-slim

    0.4.0 • Public • Published

    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.

    Development

    npm test

    Run all the tests.

    npm run test:watch

    Re-run specific tests on file changes.

    npm run lint

    Lint all the code.

    npm run dev

    Run the ./example Nuxt App in dev mode (will use the whole Bulma library).

    npm run build

    Build the example Nuxt App (will only bundle Bulma features that are used).

    npm start

    Will start the example Nuxt App in production.

    npm run upgrade

    Will start npm-check to interactively upgrade the depeendencies.

    Install

    npm i nuxt-bulma-slim

    DownloadsWeekly Downloads

    10

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    370 kB

    Total Files

    36

    Last publish

    Collaborators

    • mustardamus