时间戳

首页 > 解决方案 > 导入js模块执行css文件

javascript - 导入js模块执行css文件

问题描述

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

例如

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

所以我有 index.js 文件random/

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';

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

标签： javascriptecmascript-6es6-modules

解决方案

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

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

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

推荐阅读