导入js模块执行css文件答案

【问题标题】：importing js module executes css file导入js模块执行css文件
【发布时间】：2019-11-12 20:26:37
【问题描述】：

我正在尝试创建一个可以导入类似模块的单个索引文件。

例如

import { foo } from './random';
// or
import bar from './random';

所以我在random/ 中有 index.js 文件

import bar from './bar';
import foo from './foo';

export {
  foo 
};

export default DefaultSurvey;

效果很好，但是我有一个小问题。

foo.js 扩展 bar.js

import './Foo.scss';
export default class Foo extends Bar

问题出在这里：

import foo from './foo';

如果我尝试import bar from './random';

foo.js 的 css 适用于默认导出。为什么会这样？

【问题讨论】：

“foo.js 中的 css 应用于默认导出”是什么意思？ CSS 适用于 HTML 选择器，不适用于 JS 模块导出。

标签： javascript ecmascript-6 es6-modules

【解决方案1】：

首先，为什么会出现这个问题？不应该加载所有css吗？除非，您想有条件地加载某些 css 文件，这是另一个问题。

也许我把这个问题搞错了，如果我有请纠正我，但是当你从random/导入默认导出时，即import bar from './random';，你也在执行该模块中的所有导入，即导入所有依赖关系。由于您在random/-module 中导入foo from './foo';，并在foo.js 中导入css，因此在引用random/-module 时将加载这些依赖项。

为避免循环依赖地狱，我建议将所有 css 文件的导入放入一个文件中，例如索引文件。这样可以避免意外行为。

【讨论】：