How to import css file from node_modules?

1

I’ve tried to import css file from node_modules like this:

@import '../node_modules/tailwindcss/base.css';
@import '../node_modules/tailwindcss/components.css';
@import '../node_modules/tailwindcss/utilities.css';

however, when i run build command i get this error:

✘ [ERROR] [plugin postcss2] ENOENT: no such file or directory, open '/var/folders/m_/dv64ghpd3gs24nsxjb2zg7cc0000gn/T/tmp-12842-IyhMpNALbBwQ/my_custom_app/my_custom_app/public/node_modules/tailwindcss/base.css'

    ../../../../../var/folders/m_/dv64ghpd3gs24nsxjb2zg7cc0000gn/T/tmp-12842-IyhMpNALbBwQ/my_custom_app/my_custom_app/public/css/main.bundle.css:1:8:
      1 │ @import '../node_modules/tailwindcss/base.css';
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/@frappe/esbuild-plugin-postcss2/dist/index.js:75:10:
      75 │     build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
         ╵           ~~~~~~~~~

    at setup (/Users/omit/frappe-bench-2/apps/frappe/node_modules/@frappe/esbuild-plugin-postcss2/dist/index.js:75:11)
    at handlePlugins (/Users/omit/frappe-bench-2/apps/frappe/node_modules/esbuild/lib/main.js:840:23)
    at Object.buildOrServe (/Users/omit/frappe-bench-2/apps/frappe/node_modules/esbuild/lib/main.js:1134:7)
    at /Users/omit/frappe-bench-2/apps/frappe/node_modules/esbuild/lib/main.js:2076:17
    at new Promise (<anonymous>)
    at Object.build (/Users/omit/frappe-bench-2/apps/frappe/node_modules/esbuild/lib/main.js:2075:14)
    at Object.build (/Users/omit/frappe-bench-2/apps/frappe/node_modules/esbuild/lib/main.js:1924:51)
    at build_style_files (/Users/omit/frappe-bench-2/apps/frappe/esbuild/esbuild.js:241:17)
    at /Users/omit/frappe-bench-2/apps/frappe/esbuild/esbuild.js:169:25
2

One way to solve this could be to update the import statements to point to the correct location of the CSS files. Try changing the import statements to:

@import '../../node_modules/tailwindcss/base.css';
@import '../../node_modules/tailwindcss/components.css';
@import '../../node_modules/tailwindcss/utilities.css';

The .. in the path moves up one directory level from the current file location, and then we can navigate to the node_modules folder and the corresponding CSS files.

Hope this will help you out.

Thank you.

1 Like