undefined

undefined

From NPM

You can install the bridgecss package from NPM. This package includes the main style file which can be imported like:

import 'bridgecss/bridge.scss'

There are a few considerations to make before you go and import the file.

If you import the SASS file into Javascript then you will need to ensure that you have a bundler that can handle loading .scss files. Popular frameworks like Next.js, SvelteKit, and Vue come with this baked in, but you may have to manually configure your module bundler to include / load style files.

A second consideration is using the scss with the @use tag inside of another scss file. While in a separate file it should work fine to load with:

@use 'bridgecss/bridge.scss' as *;

Framework Specific

SvelteKit

Due to a limitation in the way that Vite builds stylesheets you will need to create a local SCSS file to reference the NPM package like:

// src/bridge.scss

@import 'bridgecss/bridge.scss';

Then inside your components you can just reference your local style:

<style lang="scss">
@use 'src/bridge.scss' as *;
</style>

Next.js

Next.js comes with Sass support built-in. However, the built in styled-jsx does not support Sass out of the box. Therefore you may need to configure it depending on your preferred method of using SCSS in Next.js.

Use with scss files / modules

If you want to use Bridge inside of SCSS files and modules you simply need to @import it.

// styles/Home.module.scss
@import 'bridgecss/bridge.scss';

main {
  @include px(10);
  background-color: $slate-200;
}

Usage with styled-jsx

You first need to install the extension @styled-jsx/plugin-sass which enables sass support in styled-jsx:

npm install -D @styled-jsx/plugin-sass

Then you will need to configure babel to be able to properly transpile these scss styles:

// .babelrc.json
{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            [
              "@styled-jsx/plugin-sass",
              {
                "sassOptions": {
                  "includePaths": [
                    "./styles"
                  ]
                }
              }
            ]
          ]
        }
      }
    ]
  ]
}

With this it will include paths in the styles directory by default. Then, inside of the styles directory we need to create a proxy sass file that reads bridgecss out of node_modules:

// styles/bridge.scss
@import '../node_modules/bridgecss/bridge.scss';

Lastly, we can use the styles inside of our styled-jsx blocks like:

export default function Home() {
  return (
    <div>
      <main>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </main>
      <style jsx>{`
        @use 'styles/bridge.scss' as *;

        main {
          display: flex;
          flex: 1;
          @include pxy(20, 8);
          border-top: 1px solid #eaeaea;
          justify-content: center;
          align-items: center;

          background-color: $slate-300; 
        
          a {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
          }
        }
      `}
      </style>
    </div>
  )
}

Note: one limitation of this approach is that we cannot use nested data in mixins. Therefore, things like the dark() mixin wont work here nad will need to be specified in a .scss module file per the above instructions.

By Manually Vendoring

Another choice is to vendor the bridge.scss file into your project, that is manually copying the file’s contents into wherever your project stores scss files.

The advantage here is that since the file is no longer coming out of node_modules there will be no issues where you sometimes have to load the file directly from node_modules and sometimes don’t. In addition, if you vendor the styles it is easier to override / edit things like the predefined colors / spacing scale to suit your needs.

The disadvantage of this approach is that any updates to BridgeCSS will need to be updated outside of a normal npm package update (alhtough this is not too unusual for styles).