CODEWITHSUNDEEP
javascriptcsswebpacklessweb-component
shin
shin

Reputation: 343

Import less style inside web component with webpack

I need to import styles from a less file inside a web component. I'm using webpack with less-loader. When I try to import the style from the less file, I get an error regarding variables used in the less.

webpack config

   module: {
                rules: [{
                    test: /\.(css|less)$/,
                    use: [{
                        loader: MiniCssExtractPlugin.loader,
                        // loader: 'style-loader',
                    }, {
                        loader: 'css-loader',
                    }, {
                        loader: 'less-loader',
                        options: {
                            paths: [
                                path.resolve(__dirname, 'node_modules'),
                            ],
                        },
                    }],
           },
plugins: [new MiniCssExtractPlugin({
                chunkFilename: '[contenthash].css',
            })]

file I'm trying to import the style in

    import editorStyle from 'src/components/editor.less';
    
    const componentTemplate = document.createElement('template');
    componentTemplate.innerHTML = `
    <style>
    ${editorStyle}
    </style>
    <div class="editor-container"><div class="html-editor"></div></div>`;
    
    class EditorWebComponent extends HTMLElement {
        constructor() {
            super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(componentTemplate.content.cloneNode(true));
        this.editor = $(this.shadowRoot.querySelector('.html-editor'));
        this.init();
    }
}

The error:

[built] [failed] [1 error]

ERROR in ./src/components/editor.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??ref--4-2!./src/components/editor.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):


    background-color: transparent !important;
    color: @text-primary !important;
         ^
Variable @text-primary is undefined
      in ~\editor.less (line 4, column 11)

Upvotes: 0

Views: 467

Answers (1)

Wasiu
Wasiu

Reputation: 419

Make sure you install less, less-loader and mini-css-extract-plugin. Your webpact need to convert all less into CSS before you can extract. just like this.

module:{
    rules: [
      {
        test: /\.(c|le)ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },
    ]
   },                                 
   plugins: [ new MiniCssExtractPlugin()],
}

Upvotes: 0

Related Questions