elycruz / rollup-plugin-sass

Rollup .sass files.
MIT License
91 stars 33 forks source link

insertStyle function gets missed when npm pack or yarn pack made on final build files #157

Open SanthoshDhandapani opened 2 weeks ago

SanthoshDhandapani commented 2 weeks ago

Hi folks,

Thanks for all your great works on this plugin.

Screenshot 2024-09-04 at 7 03 55 PM

I understand that this function was created in reference to the following PR:

https://github.com/elycruz/rollup-plugin-sass/pull/139

However, we are facing an issue: whenever we publish our build module, the node_modules directory inside the build directory is completely ignored. As a result, node_modules/rollup-plugin-sass is not available, and our npm module throws an error because it cannot find import insertStyle from '../node_modules/rollup-plugin-sass/dist/insertStyle.js'; in the bundled scss.js files.

To simulate this issue, when we run npm pack or yarn pack, we get a tar file of the build directory. When we unpack these files, we do not see the node_modules directory inside the build directory.

Rollup Config:

output: [ { dir: "build/cjs", format: "cjs", exports: "named", preserveModules: true, // Indicates not create a single-file bundle preserveModulesRoot: "src", }, { dir: "build/esm", format: "esm", exports: "named", preserveModules: true, preserveModulesRoot: "src", }, ], plugins: [ sass({ output: true, insert: true, processor: (css) => postcss([autoprefixer]) .process(css, { from: undefined }) .then((result) => result.css), }) ]

Is there a way you can create the file outside the node module and refer it to the scss.js file or please suggest a possible fix after analyzing this issue.

SanthoshDhandapani commented 2 weeks ago

Check this video for reference.

https://github.com/user-attachments/assets/e0a057eb-a29d-4064-8660-344f45e0e723

elycruz commented 1 week ago

Hi @SanthoshDhandapani , I've dealt with this very issue on client projects - The solution we used was to ensure that the [project] './dist/node_modules' folder wasn't ignored in the project's build pipelines - E.g., in your 'tsconfig.*' you would make sure the folder (and/or file) is included and in any related pipelines (rollup.config, webpack.config, etc.) you would make sure the folder/file is not being ignored/excluded.

The above is a good alternative for the short term - on the [rollup] plugin side myself and others will document how to include the generated 'node_modules' dir in library/project distributions (#158 ).

SanthoshDhandapani commented 1 week ago

Thanks for addressing this @elycruz

elycruz commented 1 week ago

Sure thing @SanthoshDhandapani !