node_modules folder created in my build folder

[cyclops24]

Hi @Anidetrix , After adding this plugin 2 files created in bellow path, Have you any idea about this? How I can prevent this?

build/node_modules/rollup-plugin-styles/dist/runtime/inject-css.js
build/node_modules/rollup-plugin-styles/dist/runtime/inject-css.js.map

[kelvinlouis]

@cyclops24 Did you find a way to resolve this? The script is responsible for injecting the CSS during runtime into the DOM. It would be nice if it could be renamed or the resulting path could be adjusted.

[Anidetrix]

Hi @cyclops24, @kelvinlouis,

First off - the basic explanation:

• This is a script included with the plugin (source) to inject CSS at runtime, at it is required since we need to use CSS without .css files somehow.
• It cannot be renamed since this file is prebundled with the plugin (see here)
• If you want to get rid of it in runtime - use extract mode (docs).

After adding this plugin 2 files created in bellow path, Have you any idea about this?

If they are created in the resulting bundle folder - please show your rollup config so I could identify the problem.

[kelvinlouis]

@Anidetrix, thanks for getting back! I appreciate that you are actively maintaining a rollup plugin dedicated to CSS and friends. In the past it was quite a painful process to get something working with the different plugins out there. This plugin seems to resolve these pain points.

I actually tried to incorporate rollup-plugin-rename into my pipeline to rename/move the file in my bundle. Moving the file in my output dir worked (I am using preserveModules), but unfortunately it did not change the import statements in the .css.js files. For now I am putting this issue aside and will work with either extract or publish the scss files directly, because our dependents all use Sass in their projects.

[Anidetrix]

I'm afraid nothing can be done with this at the moment due to how Rollup's preserveModules option works.

It's explained in this comment:

The folder is created because preserveModules is preserving the original file names and directory structure. It does not understand that node_modules is something special, though. Also, all exports are rewritten in a way that does not depend on Node's dependency resolution algorithm.

[prma85]

You can solve it using 2 plugins :)

import replace from '@rollup/plugin-replace';
import rename from 'rollup-plugin-rename';

export default {
  // your configuration
  plugins: [
    // your other plugins
    rename({
      include: ['**/*.js', '**/*.mjs'],
      map: (name) => name.replace('node_modules/', 'external/'),
    }),
    replace({
      values: {
        'node_modules/': 'external/'
      },
      delimiters: ['', '']
    })
  ],
}