用webpack导入web组件中的少风格

Question

我需要从web组件中导入较少文件的样式。我用的是webpack的小装载机。当我试图从较少的文件中导入样式时，我会收到一个错误，涉及到在“较少”文件中使用的变量。

webpack配置

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

我正在尝试导入样式的文件

    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();
    }
}

错误：

构建1错误

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)

Answer 1

请确保安装更少、更少的加载程序和迷你css解压缩插件。您的网络契约需要将所有的转换为CSS之前，您可以提取。就像这样。

​

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

​