Giter Club home page Giter Club logo

Comments (7)

glromeo avatar glromeo commented on May 30, 2024

hmm... can you to try and use a different importer than the built-in and see if that handles your case any better?
e.g using https://github.com/wessberg/sass-extended-importer

const {createImporter} = require("sass-extended-importer");

await esbuild.build({
    ...
    plugins: [
        sassPlugin({
            ...
            importer: createImporter()
        })
    ]
    ...
})
const impo

let me know how it goes

from esbuild-sass-plugin.

danny519 avatar danny519 commented on May 30, 2024

It does seem to be able to import now if I have a ~ infront, but it does not know how to import modules inside the material package.

error: Can't find stylesheet to import.
   ╷
28 │ @use '@material/animation/functions';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵

from esbuild-sass-plugin.

danny519 avatar danny519 commented on May 30, 2024

is there a way I can use sass-loader with esbuild?

from esbuild-sass-plugin.

glromeo avatar glromeo commented on May 30, 2024

@danny519 if you create a project within issues/38 with enough of your sources to recreate the issue I will look into it

from esbuild-sass-plugin.

glromeo avatar glromeo commented on May 30, 2024

I created the example myself and I can clearly see where there's an hoisting problem with @Material that is not an issue of this plugin and neither of the importer.
I could have used the --shamefully-hoist flag but for the little I understand about pnpm that defies its purpose.
I painstakingly added all the dependencies needed by the example and at the end it built fine so really the problem is that one has to work out and list down all the dependencies needed or see if there's a pnpm API that could be used.
I am going to close this issue because it's not pertinent to this plugin. It would be interesting to provide a working counter example to issue/38 where with sass-loader, webpack and pnpm one manages to get the same results without having to list the dependencies but I don't have time for it myself

from esbuild-sass-plugin.

glromeo avatar glromeo commented on May 30, 2024

@danny519 please have a look at this "improved" solution:

const esbuild = require("esbuild");
const {sassPlugin} = require("../../../lib");
const path = require("path");
const {createImporter} = require("sass-extended-importer");
esbuild.build({
entryPoints: ["src/index.jsx"],
outdir: "public",
bundle: true,
plugins: [
sassPlugin({
includePaths: [
path.resolve(__dirname, "./node_modules"),
path.resolve(__dirname, "./node_modules/.pnpm/node_modules"),
],
importer: createImporter()
})
]
}).then(console.log).catch(console.error);

which doesn't require all the dependencies being listed:

"dependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@material/checkbox": "^13.0.0",
"@material/data-table": "^13.0.0",
"@material/icon-button": "^13.0.0",
"@mui/material": "^5.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass-extended-importer": "^0.4.2"
},

from esbuild-sass-plugin.

danny519 avatar danny519 commented on May 30, 2024

thanks, I will check it out soon.

from esbuild-sass-plugin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.