据我了解,extract-text-webpack-plugin将所有在您的React组件中导入的css文件捆绑到一个单独的CSS文件中。 然后,可以在HTML标头中引用单独的CSS文件,以防止FOUC(未样式化内容的闪烁)。 使用extract-text-webpack-plugin抵消了将CSS导入React组件js文件中的一些好处,例如热加载。

那么,使用extract-text-webpack-plugin和用指向HTML模板标题中的合并CSS文件的单个链接替换组件文件中的所有样式表导入之间有什么区别?

使用CSS模块还是导入CSS都无关紧要?

更新:添加了示例进行说明。

方案A:

  1. component1.css(导入到component1.js中)
  2. component2.css(导入到component2.js中)
  3. 由extract-text-webpack-plugin生成的捆绑CSS文件(在HTML标头中调用)

方案B:

  1. component1.css(在js文件中未引用)
  2. component2.css(在js文件中未引用)
  3. 使用SASS,Laravel mix.style方法等合并的主CSS文件(在HTML标头中调用)

为什么选择方案A,而不选择方案B?

#1楼 票数:2 已采纳

好问题ariebear!

如果要使用css模块,则可以,将css文件导入到js文件/反应组件中绝对有好处。 最主要的一点是,您不必再担心范围问题,也不必担心在2个不同区域编写同一堂课。 级联变为局部于每个组件。

如果您不使用css模块,那么根本没有太多好处。 当然,您可以进行热重装,但是还有其他解决方案可用。

希望有帮助!

#2楼 票数:0

将所有样式表组合为一个优点是,浏览器会为每个样式表分别发出请求。 如果将多个合并为一个,则只会发出一个请求。 使用此插件,您的样式将不再内联到您的JS捆绑包中,因为CSS捆绑包将与JS捆绑包并行加载,因此可以提高性能。

#3楼 票数:0

您在这里提出了许多不同的问题,所以这是我的最佳选择。

您将在生产中使用extract-text-plugin。 热重装在生产中不是必需的,并且您可以摆脱FOUC,这是正确的。 从源头直接列出了其他一些优点。

如果愿意,仍可以将.css导入到组件中,或者将它们分开。 是否导入或需要CSS都很重要,这与是否使用es2015有关。

  ask by ariebear translate from so

未解决问题?本站智能推荐:

1回复

CSS_MODULES:模块构建失败,带有extract-text-webpack-plugin

当我在生产环境中使用CSS模块提取CSS时,会报告错误,但在开发环境中效果很好。 webpack.base.js webpack.prod.js webpack.dev.js 控制台中的错误消息 我的代码有什么问题,我该如何解决? 我认为问题是extrac
1回复

Webpack中的第三方Javascript和CSS文件。 奇怪的行为

我正在使用MERN堆栈。 我不得不使用第三方html管理模板,它有很多标准的js和css文件(jquery,bootstrap,datatables等)。 为了将它与react集成,我在项目的根目录中创建了一个“public”文件夹。 然后我将Express配置为将此文件夹作为静态文件夹提
1回复

CSS 类 React/Webpack 的变形

如果您检查Airbnb网站,您会发现类名不知何故变成了单个名称(字母数字)。 这种技术的名称是什么,它是从代码级别还是构建级别完成的。
1回复

React Js Project未运行Webpack本地服务器

我刚刚关闭了我的本地react应用程序,并试图将其重新启动,并且一直说它在我的脚本start:dev上失败了,任何人都可以帮助我调试日志的大量散布,但它不确定错误出在哪里。 这是我的package.json } 这是我得到的错误 请帮忙 这是所请求的错误
1回复

无法在React Web App中导入CSS文件

我想将纯CSS文件导入到我的React Web应用程序中,到目前为止,我已经尝试过这种方式: 在我的index.tsx中,我有: 在我的webpack.config.js中,我有: 错误: ./src/assets/styles.css中的错误模块解析失败:意外字
2回复

大图像不能用 Webpack + React 渲染?

我正在尝试使用 Webpack 将图像从我的图像文件夹渲染到 React 项目。 我注意到对于较小的照片(即物理上较小的尺寸,我认为这意味着较小的文件大小),照片会加载。 但是,对于较大的照片,除了此处看到的占位符之外,屏幕上不会呈现任何内容。 1 我怀疑这可能是由于 Webpack 配置不正确
1回复

ReactJS-图像src调用另一个文件夹错误

这就是它的样子 我需要像路径../m/b/image.jpg ,而aLc.value包含路径/m/b/image.jpg ,所以我只需添加.. bafore路径文件夹,但没有奏效。 我试图像上面的示例中一样,但是它给了我错误Error: Cannot find module '/m/b
1回复

是否可以使用构建过程随机散列类?

我正在开发环境中做这样的事情。 现在我构建了这个,我得到如下输出。 但这不是我想要的。 我希望对类名进行哈希处理。 像这样 我怎样才能做到这一点?