Import node_modules not working when bundle is set to true about esbuild-sass-plugin HOT 9 CLOSED

For clarification, it's cssImports.

from esbuild-sass-plugin.

your issue is likely a css import (i.e. not sass) being tried to be resolved by esbuild …I can’t just see that import in formio so if can’t tell more than that… I am happy to help you troubleshoot this but you have to come up with a github repo where you reproduce the issue

from esbuild-sass-plugin.

Yes true, it's a common css import which should recognize the tilde as an alias for the node_modules. The formio file just contains the import statement at the beginning. Here is the repo for reproducing the issue.

from esbuild-sass-plugin.

the issue here is that sass doesn’t call the plugin importer because it’s a css so the import ends in the css that esbuild is trying to bundle and esbuild has no idea how to deal with ~ indeed if you remove ~ from your example url it builds just fine

from esbuild-sass-plugin.

another option for you is to use the precompile in the plugin to change the url and remove the ~

from esbuild-sass-plugin.

I’m on holidays with just an ipad when back I want to try and add another onResolve to the plugin to male life easier in these situations

the idea is the following

var esbuild = require('esbuild');
var esbuildSass = require('esbuild-sass-plugin');

esbuild
  .build({
    entryPoints: ['./src/formio.scss'],
    bundle: true,
    outdir: './css',
    plugins: [esbuildSass.sassPlugin(),
       {name:"temp",setup(build){
      build.onResolve({filter:/^~.*css$/},({path})=>{
        return {path: require.resolve(path.slice(1))}
      })
    }}],
    
  })
  .catch(() => {
    process.exit(1);
  });

from esbuild-sass-plugin.

I’m on holidays with just an ipad when back I want to try and add another onResolve to the plugin to male life easier in these situations

the idea is the following

var esbuild = require('esbuild');
var esbuildSass = require('esbuild-sass-plugin');

esbuild
  .build({
    entryPoints: ['./src/formio.scss'],
    bundle: true,
    outdir: './css',
    plugins: [esbuildSass.sassPlugin(),
       {name:"temp",setup(build){
      build.onResolve({filter:/^~.*css$/},({path})=>{
        return {path: require.resolve(path.slice(1))}
      })
    }}],
    
  })
  .catch(() => {
    process.exit(1);
  });

Yes no worry, writing the full path works fine for me, so this improvement is not really urgent or even tragic when it's not possible. Enjoy your holidays.

from esbuild-sass-plugin.

@alex-w0 you can upgrade to 2.2.4 and add cssImports: true to your options
thank you for your example repo!

from esbuild-sass-plugin.

Thanks works great 🚀 I also didn't know that the ~ is deprecated these days ^^

from esbuild-sass-plugin.