Having trouble with vendor CSS not being recognized during brunch compilation

Question

Having trouble with vendor CSS not being recognized during brunch compilation

I am currently exploring the use of Pure.css in my application. After installing it via npm, I have configured my brunch-config.js as follows:

stylesheets: {
  joinTo: {
    'app.css': /^app/,
    'vendor.css': /^(?!app)/
  }
}

At this point, I anticipated that vendor.css would be generated, but unfortunately it does not. Strangely, if I include require('purecss'); in my JavaScript file, then the vendor.css is generated. However, this results in a JavaScript error stating "Cannot find module 'purecss' from '<filename>'". I have also experimented with using various versions of @import 'purecss' in my CSS files without any success.

Does anyone know how to properly include vendor CSS from npm modules?

css brunch

Answer 1

Answer №1

If you want to add

node_modules/bootstrap/dist/css/bootstrap.css

to your project using npm, you can do so by configuring the npm section in your brunch-config.js file. Here is an example of how you can achieve this:

npm: {
  styles: {
    bootstrap: ['dist/css/bootstrap.css']
  }
}

This configuration, combined with the files section in your brunch-config.js file, will ensure that bootstrap's css is written into vendor.css.

Here is a complete example of a brunch-config.js file that includes bootstrap css:

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'app.js': /^app/,
        'vendor.js': /^(?!app)/
      }
    },
    stylesheets: {
      joinTo: {
        'app.css': /^app/,
        'vendor.css': /^(?!app)/
      }
    }
  },

  plugins: {
    babel: { presets: ['es2015'] }
  },

  npm: {
    styles: {
      bootstrap: ['dist/css/bootstrap.css']
    }
  }
};

Answer 2

If you want to add

node_modules/bootstrap/dist/css/bootstrap.css

to your project using npm, you can do so by configuring the npm section in your brunch-config.js file. Here is an example of how you can achieve this:

npm: {
  styles: {
    bootstrap: ['dist/css/bootstrap.css']
  }
}

This configuration, combined with the files section in your brunch-config.js file, will ensure that bootstrap's css is written into vendor.css.

Here is a complete example of a brunch-config.js file that includes bootstrap css:

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'app.js': /^app/,
        'vendor.js': /^(?!app)/
      }
    },
    stylesheets: {
      joinTo: {
        'app.css': /^app/,
        'vendor.css': /^(?!app)/
      }
    }
  },

  plugins: {
    babel: { presets: ['es2015'] }
  },

  npm: {
    styles: {
      bootstrap: ['dist/css/bootstrap.css']
    }
  }
};

Having trouble with vendor CSS not being recognized during brunch compilation

Answer №1

Similar questions

The line-height property does not appear to have any effect when used within a table cell

Traditional alignment challenges arise when trying to position two elements in a row using HTML and CSS

The issue of the drop-down menu not appearing persists when using HTML and CSS

Utilize a unique font exclusively for Internet Explorer

Styling does not affect an Angular component that is injected into an iframe

What is the best way to create a sign-up box that appears on the same page when you click on the sign-up button

Place the delete and edit buttons on the right side of the card

What are some other options to using position: absolute when working within an inline position:relative?

Disabling the underline style on a4j:commandLink

What is the best way to shorten string values that exceed a certain length?

What steps should I follow to make a stunning photo collage using HTML, CSS, and Bootstrap?

Arranging Elements Using CSS

What is the method for adjusting the position of materialize CSS select options?

`Enhancing Navigation Links with Scroll-Activated Styling`

What is the best way to align an Icon in the navbar-toggler of Bootstrap 5?

What is the best approach to ensure the navbar is responsive based on the viewport size?

What is the best way to create a 3x3 grid layout with 9 input text boxes that do not have a double border thickness?

Is it possible to customize the color of the placeholder and clear-icon in the ion-search bar without affecting

Implementing the switchClass function on a parent class when hovering over a child class, while ensuring that only the specific divs are targeted and not others with the

Adaptable Bootstrap navigation bar