reactjs - 将 CSS 文件导入到样式化组件

Question

有没有办法将 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插件。

最好，丹尼尔

Answer 1

您可以使用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