Question

我刚刚在我的组件中导入了.css样式表，并且在生成的文件中出现问题，它会导致像require.js这样的错误：5未捕获的错误：＆＃34; src / Container.css＆＃34;的脚本错误，需要：容器

文件夹结构

App
    node-modules
    src
       Container.css
       Container.jsx
    dest
       Container.css
       Container.js

src - Container.jsx：

    import './Container.css';

    const Container = () => (
        <div className="block">  // i know that here i can use like {style.block} if I do like import style from './Container.css'; 
            <p className="message">Get started !!!</p>
        </div>
    );

    ReactDOM.render(<Container />, document.getElementById('App'));

Container.css：

.block {
        height: 100%;
        margin-bottom: 0px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px -3px;
        background: rgb(255, 255, 255);
        border-width: 1px;
        border-style: solid;
        border-color: rgb(221, 221, 221);
        border-image: initial;
        padding: 15px;
}
.message {
        color: #413b3b;
        font-size: 18px;
}

我不确定如何在我的Container.jsx文件中导入Container.css并使其正常工作，并且我使用 grunt-babel将jsx转换为js 并要求.js文件。所以我明确表示我没有使用webpack 和css-modules。我知道使用css-modules是一种明智的方法，但不确定如何在没有webpack的情况下实现。

我已经在我的组件中导入了我的css样式表，这导致我运行我的应用程序。我已经实现了内联样式，但我想知道是否有更好的方法来实现这一点。

提前致谢。

Answer 1

import containerStyles from './Container.css';

第一个解决方案---＆gt; 写在render（） -

里面

let cls_block = `${containerStyles.block}`;

在html部分 - 的className = {cls_block}

第二种解决方案---＆gt; 的className = {containerStyles.block}

Answer 2

这里仍然有解决方案，它将帮助一些需要工作的人以咕unt和通天的方式做出反应。如果您需要将css文件导入组件中，例如

import './Container.css';

您需要此插件：https://github.com/guybedford/require-css

通过使用它，您可以像这样导入它：

import 'css!./Button_Styles.css';

此答案适用于正在使用grunt且需要但不是webpack和css-modules的人。

无法在我的JSX组件中导入.css样式表

2 个答案: