WebPack 向导入的样式表的类添加下划线，打破了 React 组件的样式

Question

我在电子反应应用程序上遇到了一个奇怪的问题。 基本上，当我导入 NMP 包React-Quill的样式表时，它是一个块样式的编辑器作为反应组件

按照说明，我将样式表导入为

import 'react-quill/dist/quill.snow.css'; // ES6

但是没有实际的样式应用于组件。 我已经追踪到这是一个奇怪的问题，编译的 CSS 出现在标题内的样式标签中

.quill-snow__ql-container__WPmau {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}

下划线不应该在那里，因此没有正确应用 CSS

有趣的是，我确实有另一个类似的组件，我正在使用react-color-palette

并且它的样式被正确导入

.rcp-body{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
-webkit-align-items:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
gap:20px;
width:100%;padding:20px;
}

这对我没有任何意义

这是我正在使用的代码

React-Quill 组件：

import React, { useState } from 'react';
import hljs from 'highlight.js';
import ReactQuill from 'react-quill';
import './RichTextEditor.css';

const modules = {
  // syntax: {
  //   highlight: (text: string) => hljs.highlightAuto(text).value,
  // },
  toolbar: [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ color: [] }],
    [{ align: [] }],
    [{ indent: '-1' }, { indent: '+1' }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link', 'image', 'video'],
    ['code-block', 'blockquote'],
    [{ script: 'sub' }, { script: 'super' }],
  ],
  clipboard: {
    matchVisual: false,
  },
  syntax: false,
};

const textFormats = [
  'font',
  'header',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'background',
  'color',
  'script',
  'list',
  'bullet',
  'link',
  'image',
  'video',
  'clean',
  'code-block',
  'indent',
  'list',
  'align',
];

function RichTextEditor() {
  const [value, setValue] = useState('');

  hljs.configure({
    // useBR: false,
    languages: [
      'javascript',
      'java',
      'html',
      'xml',
      'sql',
      'typescript',
      'bash',
    ],
  });

  return (
    <ReactQuill
      value={value}
      onChange={setValue}
      placeholder="Write a new Note"
      modules={modules}
      formats={textFormats}
    />
  );
}

export default RichTextEditor;

网络包：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['to-string-loader', 'css-loader'],
        include: /node_modules/,
      },
      // ...
    ],
  },
};

我还创建了 package.json 的 Pastebin 作为它相当大的样板Package.json

Answer 1

经过4天痛苦的调试，我想通了。

react-electron 样板有自己的 webpack 配置，这是先例。 如果有人使用这个样板电子反应样板webpack 配置位于 .erb/configs