有没有办法将 CSS 文件导入到样式化组件中？

我的依赖项之一，React Quill Editor ，通过导入 CSS 作为基础并在其之上应用更改来主题化。我的所有组件都是样式组件，我希望将 CSS 本地化为 JS 组件，而不是将 CSS 作为“全局”样式导入。

现在我已经按照以下形式将他们的 CSS 复制到我自己的文件中。

我在下面写了一个简短的例子。

/** editorCSS.js **/ 
import { css } from 'styled-components'; 
export default css` 
/* copied CSS here */ 
 
.class-to-extend { 
   color: green; 
} 
` 
 
 
/** EditorComponent.js **/  
import styled from 'styled-components'; 
import ReactQuill from 'react-quill'; 
import editorCSS from './editorCSS'; 
 
const StyledReactQuill = styled(ReactQuill)` 
    ${editorCSS} 
    /** Additional customization if necessary (e.g. positioning) */ 
` 
export default StyledReactQuill; 
` 

我宁愿在样式组件的范围内导入引用它们的 css 文件，而不是复制它。

如果我从'react-quill/dist/quill.snow.css'导入ReactQuillCSS;由于css-loader它仍然会全局应用我的CSS插件。

最好， 丹尼尔

请您参考如下方法:

您可以使用raw-loader加载 quill.snow.css 样式表，然后将其包含在您的样式组件中。

/** EditorComponent.js **/  
import styled from 'styled-components'; 
import ReactQuill from 'react-quill'; 
import quillCSS from '!!raw-loader!react-quill/dist/quill.snow.css'; 
 
const StyledReactQuill = styled(ReactQuill)` 
    ${quillCSS} 
    /** Additional customization if necessary (e.g. positioning) */ 
` 
export default StyledReactQuill; 
 

根据 raw-loader 文档，您可以使用 !! 来防止通过 css-loader 全局添加样式

Adding !! to a request will disable all loaders specified in the configuration