WebPack 为导入的样式表的类添加下划线，从而破坏反应组件的样式

Posted 2023-02-21

【中文标题】WebPack 为导入的样式表的类添加下划线，从而破坏反应组件的样式

【英文标题】：WebPack adding underscores to classes of an imported stylesheet breaking styles of react component

【发布时间】：2021-12-09 04:59:11

【问题描述】：

我在电子反应应用程序上遇到了一个奇怪的问题。 基本上当我导入 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

【参考方案1】：

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

react-electron 样板文件有自己的 webpack 配置，这是先例。 如果有人使用这个样板electron-react-boilerplate webpack 配置位于 .erb/configs 下