有没有办法将 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
关于reactjs - 将 CSS 文件导入到样式化组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49337702/