iam-medvedev / esbuild-plugin-less

esbuild plugin for less files
https://npmjs.com/package/esbuild-plugin-less
Do What The F*ck You Want To Public License
43 stars 12 forks source link

How it works with cssModulesPlugin #65

Open WangShuXian6 opened 2 years ago

WangShuXian6 commented 2 years ago

Expected Behavior

...

cssModulesPlugin https://github.com/indooorsman/esbuild-css-modules-plugin#readme

When working with the cssModulesPlugin, the less files can be compiled into css files first and then handed over to the cssModulesPlugin for further processing

Actual Behavior

...

When working with the cssModulesPlugin, the cssModulesPlugin will not work

Steps to Reproduce the Problem

  1. ...

    const esbuild = require("esbuild");
    const { nodeExternalsPlugin } = require("esbuild-node-externals");
    const autoprefixer = require("autoprefixer");
    const postCssPlugin = require("@deanc/esbuild-plugin-postcss");
    const cssModulesPlugin = require("esbuild-css-modules-plugin");
    const { lessLoader } = require("esbuild-plugin-less");
    
    esbuild
    .build({
      //logLevel: 'silent',
      //absWorkingDir: basePath,
      entryPoints: ["./src/index.tsx"],
      entryNames: "[name]",
      //outfile: "./dist/index.js",
      outdir: "./dist/",
      bundle: true,
      //minify: true, //process.env.NODE_ENV === "production"
      platform: "browser", //"node", "browser"
      sourcemap: true, //process.env.NODE_ENV !== "production"
      external: ["react", "react-dom"],
      target: "es6",
      loader: { ".svg": "dataurl", ".png": "dataurl", ".jpg": "file" },
      plugins: [
        nodeExternalsPlugin(),
    
        cssModulesPlugin({ v2: false ,inject: true,}), //cssModulesPlugin 必须在 postCssPlugin 之前
        lessLoader(),
        postCssPlugin({
          plugins: [autoprefixer],
        }),
      ],
      inject: ["../../scripts/react-shim.js"],
    })
    .catch(() => process.exit(1));
  2. ...

import styles from "./index.module.less";

export const Ui = () => { return

ui
; };

  3. ...
```less
.aa{
    color: rgb(189, 29, 29);
    background-color: rgb(20, 221, 154);
}

Versions

dim00n62 commented 2 years ago

Same issue for me @WangShuXian6 Did you find any solution to resolve the case LESS + CSS modules ? Thanks

jeffdrumgod commented 2 years ago

Sorry owner but to help @dim00n62 I switched to https://github.com/g45t345rt/esbuild-style-plugin until I update this specific package for less.

dim00n62 commented 2 years ago

@jeffdrumgod also switched to esbuild-style-plugin and it helped, thanks!