Reactjs 将CSS文件导入样式化组件

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

我的一个依赖项是可主题化的，方法是导入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'导入reactquillcs，

由于
css加载器
插件，它仍将全局应用我的css

最好的，
Daniel
据我所知，无法仅在范围内导入常规CSS。到目前为止，我将样式化组件与库中的CSS相结合的方法是在jsx中为您自己的样式化组件提供一个类名


const MyStyledComponent=styled（ComponentFromLibrary）`
颜色：红色；
`;
//和在渲染函数中
返回(
);我就是这样做的：

代码
import React，{Component}来自“React”；
从“react dom”导入react dom；
从“样式化组件”导入样式化；
常量fetchStyles=（）=>
取回(
"https://gist.githubusercontent.com/bionicvapourboy/61d3d7a8546cb42e0e3194eb9505f48a/raw/5432218dd83320d53d1cbc2f230b81c765183585/style.css"
).then（response=>response.text（））；
类应用程序扩展组件{
状态={
风格：“
};
componentDidMount（）{
fetchStyles（）.then（data=>this.setState（{style:data}））；
}
包装器=（）=>Styled.div`
${this.state.style}
`;
render（）{
const Wrapper=this.Wrapper（）；
返回(
风格
不时尚
开始编辑，看看神奇的发生！
);
}
}
const rootElement=document.getElementById（“根”）；
render（
据我所知，样式化组件本质上就是模板文本

您唯一的问题应该是，当您尝试将导入的css放入组件css时，它被定义为一个对象。您是否尝试过先将其键入字符串

/** EditorComponent.js **/ 
import styled from 'styled-components';
import ReactQuill from 'react-quill';
import editorCSS from './editorCSS';

const newCSS = editorCSS.toString();

export default Styled(ReactQuill)`
  ${newCSS}
`;

为了实现这一点，您需要使用不同于
css-loader
的加载程序。您可以编写不同的加载程序，为
样式化组件
做准备，而不是将其添加到全局样式表中

如果您需要
css加载器
，那么您需要定义由它处理的css文件以及为样式化组件加载的css文件，这使得它实际上并不实用。
您可以使用加载
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
全局添加样式

将
！！
添加到请求将禁用配置中指定的所有加载程序

您可以添加一个用于将样式从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;


例如，将所有第三方
.css
文件从
node\u模块
as导入，其他文件照常导入：

// webpack.config.js
const config = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // load project styles via style-loader
        exclude: /node_modules/, 
      },
      {
        test: /\.css$/,
        use: ["to-string-loader", "css-loader"], // use to-string-loader for 3rd party css
        include: /node_modules/,
      },
      // ...
    ],
  },
  // ...
}

用法：
如果尚未使用，请不要忘记将
安装到字符串加载程序


这比@jonathanhculver有一些优势：


一个中央配置文件决定如何处理
.css
文件
遵循网页上的建议：

尽可能使用module.rules，因为这将减少源代码中的样板文件，并允许您在出现问题时更快地调试或定位加载程序。（）


避免ESLint错误-查看演示

css加载程序
仍然可以解析
@import
和
url（）

editorCSS.toString（）
将返回
[object object]
.Hi，我如何使用
StyledReactQuill
作为具有子对象的react组件？如果我设置了styled.div，则类似于
{children}
，结果是具有子对象的react组件，但没有设置样式（Quill）`。
import styled from 'styled-components';
import ReactQuill from 'react-quill';
import ReactQuillCSS from 'react-quill/dist/quill.snow.css' // no custom webpack syntax

const StyledReactQuill = styled(ReactQuill)`
    ${ReactQuillCSS}
    // ... other styles
`