CSS fails to bundle from node_modules but works from src/assets

Has anyone else run across the issue where including css from a node module isn’t working, but copying the file into the project’s local assets allows it to work?

Context

Using vue-cli (@vue/cli 5.0.0-rc.1).

Problem Briefly

Importing the bootstrap.css from the node module works and the styles are present in the bundle. However, the tabulator_bootstrap4.css styles from that node module are not getting incorporated.

//main.js
import 'bootstrap/dist/css/bootstrap.css'                                                                                                   
import 'tabulator-tables/dist/css/tabulator_bootstrap4.css'                                                                               

When I copy the tabulator_bootstrap4.css out of the node module as debug_tabulator.css in my local assets, it gets processed by webpack just fine and incorporated into the bundle.

//main.js
import 'bootstrap/dist/css/bootstrap.css'                                                                                                                                                                                
import '@/assets/debug_tabulator.css'

Related

At a glance, it appears this thread is related, but there is not corresponding .scss for me to try the solution there.

Do you still get the same issue when following the guidance of the docs?

All compiled CSS are processed by css-loader, which parses url() and resolves them as module requests. This means you can refer to assets using relative paths based on the local file structure. Note if you want to reference a file inside an npm dependency or via webpack alias, the path must be prefixed with ~ to avoid ambiguity. See Static Asset Handling for more details.

See: Working with CSS | Vue CLI

I believe that’s for referencing a static asset, not for importing one.

https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

Static assets can be handled in two different ways:

  • Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.
  • Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.

If the import relative path needed to be prefixed with a ~, I would expect the bootstrap.css import would not be working, but it is.

Ah, sorry, I only briefly read your question. Maybe there’s something in your build preventing the import. I had no problem when trying to replicate: weathered-hill-0477t - CodeSandbox

Thank you. That’s informative.