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

When viewing Google maps in full screen mode, the image suddenly vanishes

What is the best way to keep the navbar contained within the parent div (hero image) no matter the size of the screen?

In the case of a PDF being in landscape orientation, the full width of the document is not utilized despite the width being set to

The CSS property that controls the background color of an element

Designing a unique customized top navigation bar in Magento 1.9.2

How can we reduce the use of !important in SCSS when working with React and Material UI?

What is the process for assigning a value to the body in a div element?

HTML header with zero margin

How come modifying the css of one component impacts all the other components?

Is there a way to customize the background color of the active list item class in Bootstrap 4?

What is the best way to line up three divs horizontally and center the contents inside each one?

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Display block disappearance persists even after being set to none

Expanding Images with JQuery Accordion

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

Can you help me figure out how to make a header that sticks to the top of the page as you scroll horizontally, and a sidebar that stays in place as you scroll vertically with

Choose a single SVG file based on its unique ID

When viewed on a mobile device, the page defaults to displaying the NumPad instead of the Text Keyboard in Angular

Ensure the slider functions on all types of browsers

react native ScrollView items with uniform padding at the top and bottom