Necesito importar estilos desde un archivo menor dentro de un componente web. Estoy usando webpack con menos cargador. Cuando trato de importar el estilo del archivo less, aparece un error con respecto a las variables utilizadas en less.
configuración del paquete web
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', })]archivo en el que estoy tratando de importar el estilo
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(); } }El error:
[construido] [fallido] [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)Asegúrese de instalar less, less-loader y mini-css-extract-plugin. Su webpact necesita convertir todo menos en CSS antes de poder extraer. así como esto
module:{ rules: [ { test: /\.(c|le)ss$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] }, ] }, plugins: [ new MiniCssExtractPlugin()], }