Question

我正在使用导入功能，我希望对css使用类似的导入，我的意思是“ import'./file.css'”，然后所有css属性都分散在文件中。我已经用ReactJS尝试了同样的方法，但是失败了。

我的期望是模仿js文件的css导入，但不起作用。

以下是相关代码：

import React from "react";
import ReactDOM from "react-dom";

来自“ ./sample”的

impoprt示例导入“ ./exported.js”；导入“ ./styles.css”；

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {sample[2]}
      {text1}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当不使用星号导入时，我在此行出现错误：

  {text1}

我想知道如何制作类似的东西。任何提示都会很棒，

谢谢

Answer 1

您需要执行import defaultExport from 'moduleName';，以便可以在代码中使用defaultExport。

执行import 'moduleName';仅将运行模块中的代码，而不会导入任何内容（有关详细信息，请参见MDN）

在您的沙箱中，执行import sample from 'sample.js';即可。

Answer 2

您的沙箱中有问题的代码是：import "./exported.js";

一个令人困惑的原因是您使用的是Create React App，它隐藏了webpack的魔力，使您可以将CSS文件导入为import "./styles.css";。这不是模块导出和导入的方式。我建议阅读exploringjs.com

上有关导出和导入详细信息的部分

您所做的本质上是一个空导入，即您不导入任何内容，只是执行文件。

空导入：仅加载模块，不导入任何内容。的   首先，在程序中进行此类导入会执行模块主体。
  导入'src / my_lib';

但是这里有多种概括性地导入内容的方法。

假设：您的./exported.js文件具有以下导出：

// some other code
export { text1, text2 };
export default config;

然后您可以将它们导入各种格式

// import only the default export
import config from './exported.js';
// This only imports the export qualified with default, it ignores others 
// i.e. 
console.log(config); //works
console.log(text1); // fails
console.log(text2); // fails

// import everything the module exports, but as a namespace
import * as myLib from './exported.js';
// usage: all named exports are properties of the myLib object
console.log(myLib.text1); // works
console.log(myLib.text2); // works
console.log(myLib.config); // should not work, unless you have also exported config as a named export

// import only what you need
  import { text1, text2 } from './exported.js';
  console.log(text1); // works
  console.log(text2); // works

// you can also rename them
  import { default as x, text1 as a, text2 as b } from './exported.js';
  console.log(x); // works --> config
  console.log(a); // works --> text1
  console.log(b); // works --> text2

Answer 3

您的代码中的问题导致导入中断，该导入不允许您包含css文件，问题是导入 export.js 和 sample.js 必须包括使用正确的解构，例如：

Dockerfile

完整的示例Code Sample。

有关 import 语句的更多信息：import 销毁工作语句：destructuring assignment 。

最诚挚的问候。

通过“ import'./file.js'”召唤来从file.js导入所有变量

3 个答案: