webpack Import 动态文件

最新推荐文章于 2024-08-09 09:29:40 发布

dz45693

最新推荐文章于 2024-08-09 09:29:40 发布

阅读量2.9k

点赞数

分类专栏： react vue webpack

本文链接：https://blog.csdn.net/ma_jiang/article/details/81811704

版权

这篇博客讲述了在React中如何动态导入scss文件以实现样式覆盖，以及如何解决Webpack在打包时将所有相关文件打包进去的问题。作者通过示例代码展示了如何在条件判断下导入不同的scss文件，并在遇到'import'和'export'错误时，采用预构建(prebuild.js)和修改package.json的方法来避免将不需要的路径打包进最终文件。

摘要由CSDN通过智能技术生成

其实React Import scss 是非常简单的，比如一般写法import './PromotionPage.scss';，今天遇到一个样式需要覆盖，那么修改后的代码变成了：

import './PromotionPage.scss';

import { config } from "../../../common/config";
if (config.spec == "venetian") {
import '../../../requirement/venetian/stuff/PromotionPage.scss';
}

很明显程序报错了：'import' and 'export' may only appear at the top level

最后修改为：

import { config } from "../../../common/config";
if (config.spec == "venetian") {
    import ('../../../requirement/venetian/stuff/PromotionPage.scss');
}

参考：ES6: Conditional & Dynamic Import Statements

但是在webpack 打包的时候，会把