Using Pinecone in a Sage 10 Project

This document assumes that you are using Sage 10.


  1. Install Node.js and npm.

  2. Create a package.json file in your project.


Pinecone must be installed from NPM. In order to add Pinecone to your project, you’ll need to run the following command:

npm install --save @platform-coop-toolkit/pinecone

Build Configuration

Sage 10 uses Laravel Mix. To use Pinecone, your webpack.mix.js file should look like this:

const mix = require('laravel-mix');

    .browserSync('pinecone.test'); // Replace this with your local development URL.

mix.sass('resources/assets/styles/main.scss', 'styles', {
    sassOptions: {
        includePaths: [path.join(__dirname, 'node_modules')],

mix.js('resources/assets/scripts/main.js', 'scripts')

mix.copy('resources/assets/images', 'dist/images')
    .copy('resources/assets/fonts', 'dist/fonts')
    .copy('node_modules/@platform-coop-toolkit/pinecone/src/assets/images', 'dist/images')
    .copy('node_modules/@platform-coop-toolkit/pinecone/src/assets/fonts', 'dist/fonts');

    processCssUrls: false,


At the top of resources/assets/styles/main.scss, add the following line:

@import "~@platform-coop-toolkit/pinecone";

Pinecone’s component styles, Sass functions and utility classes will now be available for use within your theme’s Sass.


At the top of resources/assets/scripts/main.js, add the following line:

import Pinecone from '@platform-coop-toolkit/pinecone';

Pinecone’s JavaScript classes will now be available for use within your theme’s JavaScript.