How to add the less-loader to my theia-extension

[waikitc]

Hi Team,

I am creating an extension theia with reactWidget in frontend. as I'm used to using less in my previous projects (https://webpack.js.org/loaders/less-loader/), I'd like to add it to my extension.
My project tree:

• root
• • electron-app/
• • • lib/
• • • src-gen/
• • • webpack.config.js
• • my-extension/
• • • lib/browser/
• • • • my-widget.d.js
• • • • my-widget.js
• • • • my-widget.style.less
• • • src/browser/
• • • • my-widget.tsx
• • • • my-widget.style.less

I've already tried adding the less-loader to the root
npm install less less-loader --save-dev

Then add module rule in electron-app/webpack.config.js:

module.exports = [
    ...configs,
    nodeConfig.config,
    {
        module: {
            rules: [
                {
                    test: /\.less$/,
                    use: [
                        // compiles Less to CSS
                        "style-loader",
                        "css-loader",
                        "less-loader",
                    ],
                }
            ]
        }
    }
];

When I tried to build it, npm run build:electron, I got an error:

ERROR in main
Module not found: Error: Can't resolve './src' in 'E:\projects\theia\thea_generator\my-theia-app_react\electron-app'
resolve './src' in 'E:\projects\theia\thea_generator\my-theia-app_react\electron-app'

I can see that in electron-app everything is generated, because there is no src, only src-gen.
Therefore, I would like to know how to configure my extension to use Less in my ReactWidget.

Thank you very much, best regards.

[msujew]

Hey @waikitc,

I'm a bit confused by the error message. Does the less-loader produce the error message? Why does it attempt to access the src directory of the electron-app? How do you import the .less file in your src files?

[sdirix]

Hi @waikitc, You might want to try to add your rules to the frontend webpack config instead of creating your own standalone webpack configuration, e.g.

configs[0].module.rules = [{
                    test: /\.less$/,
                    use: [
                        // compiles Less to CSS
                        "style-loader",
                        "css-loader",
                        "less-loader",
                    ],
                },
                ...configs[0].module.rules
               ]

[msujew]

Right, that should probably do the trick.

[waikitc]

Hello @sdirix and @msujew ,

Thank you for your responsiveness.

I was able to use Less in my Theia extension by replacing the code in "electron-app/webpack.config.js" with yours.

If I understand correctly, when we run the command "npm run build:electron" ("yarn --cwd electron-app bundle"), it allows copying the files from "electron-app/src-gen" to "electron-app/lib".

However, before that, I had another issue because my file "my-widget.style.less", which is in "my-extension/src/browser/", needed to be placed in "my-extension/lib/browser/".

At first, I wanted to add a "webpack.config.js" in "my-extension/" with the goal of using CopyWebpackPlugin:

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: "src/**/*.less", // Copies all .less files from src and subdirectories
                    to: "lib/[name][ext]", // Keeps the original name and extension
                    context: "src", // Preserves the folder structure
                }
            ]
        })
    ]
};

I tried to run it with "npx webpack --config webpack.config.js", but I encountered errors due to missing default parameters, so I abandoned the idea.

To copy the Less files from "my-extension/src/browser/" to "my-extension/lib/browser/", I ended up using the command in "my-extension":
"copy-less": "npx cpx "src/**/*.less" lib/".

So in conclusion, I successfully managed to use Less in my extension.
I’m wondering if there’s a cleaner way to achieve this.
Perhaps integrating "webpack.config.js" into my extension and using CopyWebpackPlugin?

Thanks again for your help.

Best regards,

[sdirix]

Hi @waikitc,
In Theia we have the same issue with CSS files imported in our Typescript files. What we settled on is to refer to the src directory via relative path, see for example here. This way we don't need to copy the CSS files to the lib directory while still allowing it to be resolved both from the sources and from the transpiled Javascript files.