我能'；不要将任何文件导入我的javascript文件

我已向现有项目添加了一个React，如下所示： 我想将我的组件拆分成更小的组件，但结果是我无法将任何文件导入我的js文件（.js.css）。当我添加import语句时，该文件中的整个代码都不起作用。 My main component questions.js：

import RatingScale from "./ratingScale";
import "./style.css"

var questions = JSON.parse(document.getElementById("mydiv").dataset.questions);

class Question extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="question">
        <p>{this.props.content}</p>
        <p>{this.props.id}</p>
        <RatingScale />
      </div>
    );
  }
}

ReactDOM.render(
  <Question content={questions[0].question_text} />,
  document.querySelector("#question1")
);
ReactDOM.render(
  <Question content={questions[1].question_text} />,
  document.querySelector("#question2")
);
ReactDOM.render(
  <Question content="Pytanie 3" />,
  document.querySelector("#question3")
);

---

当我删除导入时，它会正常工作。此外，在导入中，当我键入js文件的名称时，它会看到它，但它不会看到css文件。

完全客户端React的设置说明不适合导入。这种格式的局限性使我认为React网站给新开发人员带来了严重的伤害，甚至建议将这种方法作为一个快速开始

请遵循页面中的建议：

本页介绍了几种常用的React工具链，它们有助于 任务如下：

• 扩展到许多文件和组件
• 使用来自npm的第三方库
• 尽早发现常见错误
• 在开发中实时编辑CSS和JS
• 优化生产的产量

使用

---

可选地，您可能需要考虑哪一个提供了一个更简单的工具链（但不是一个常见的和有文档证明的）。问题是我不想创建新的应用程序，因为Flask正在后台工作。我会尝试使用包裹，也许这是解决方案。在这种情况下，你还有其他建议吗？当你构建应用程序时（无论你使用的是webpack还是parcel），它都可以被放入Flask生成的页面中。在开发过程中，您只需要开发服务器。所以最好在现有项目中使用create React app创建一个新的React应用程序？我不知道我是否理解清楚。一般来说，除非你已经建立了基于monorepo的系统，否则我会创建一个React应用程序（我建议初学者创建React应用程序）作为并行项目，然后将构建的应用程序文件拉入主项目，作为主项目构建过程的一部分。不幸的是，这对我来说不是最好的方法，因为项目的烧瓶部分不是我的，我不想破坏整个回购协议。我可以绕过它，但我所需要的只是通过React中的className属性从style.css文件中设置样式。既然我不能导入这个文件，而且我已经在我的html文件中链接了它，那有什么方法可以使用它吗？内联样式对我没有帮助。

class RatingScale extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="rating_scale">
        <form>
          <label>
            <input type="radio" name="rad" value="1" />
            <span>1</span>
          </label>
          <label>
            <input type="radio" name="rad" value="2" />
            <span>2</span>
          </label>
          <label>
            <input type="radio" name="rad" value="3" />
            <span>3</span>
          </label>
          <label>
            <input type="radio" name="rad" value="4" />
            <span>4</span>
          </label>
          <label>
            <input type="radio" name="rad" value="5" />
            <span>5</span>
          </label>
        </form>
      </div>
    );
  }
}

export default RatingScale;

ReferenceError: Can't find variable: require