To use node-bourbon in your project, you'll need to follow the steps below. node-bourbon is a package that provides Sass mixins, so you'll need to compile your Sass code to CSS after including it in your project.

  1. Install node-bourbon: In your project's root directory, run the following command to install node-bourbon using npm:

    css
    npm install bourbon --save-dev

    This will install node-bourbon and save it as a development dependency in your project's package.json file.

  2. Include Bourbon in Your Sass: In your main Sass file (e.g., styles.scss), import node-bourbon at the beginning of your file. Make sure to adjust the path based on the location of your node_modules folder.

    scss
    // styles.scss @import '../node_modules/bourbon/app/assets/stylesheets/_bourbon';
  3. Compile Sass to CSS: After including node-bourbon, you need to compile your Sass code to CSS. You can use a build tool like Webpack, Gulp, or Grunt to handle this compilation process.

    If you're using Webpack, you can use the sass-loader to compile your Sass files. Install the required packages:

    css
    npm install sass sass-loader --save-dev

    Configure Webpack to handle Sass files by adding the following rule to your webpack.config.js:

    javascript
    // webpack.config.js module.exports = { // ... other configuration options ... module: { rules: [ { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], }, ], }, };

    If you're using other build tools like Gulp or Grunt, set up the appropriate tasks to compile your Sass code to CSS.

  4. Use Bourbon Mixins in Your Sass: Now that node-bourbon is included in your Sass, you can use its mixins in your styles. For example, you can use Bourbon's transition() mixin:

    scss
    // styles.scss .my-element { width: 100px; height: 100px; background-color: blue; @include transition(all 0.3s ease); }

    The @include transition(all 0.3s ease) line applies the transition mixin to .my-element, adding cross-browser transition properties.

  5. Build Your Project: After making changes to your Sass files, run your build task to compile the Sass into CSS and bundle your assets.

Make sure to adjust the paths and configurations based on your project's setup. If you encounter any issues, check your project's documentation and verify that the Bourbon installation and Sass compilation steps are correctly configured.

Note: The node-bourbon package has been deprecated in favor of the official @bourbon package, which is the Sass library for Bourbon. If possible, consider using the official package instead:

sql
npm install @bourbon/xxx --save-dev

Replace xxx with the specific package you need (e.g., @bourbon/transition). The usage and integration steps are similar to those outlined above.

Have questions or queries?
Get in Touch