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)
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()],
}