在 Webpack + VueJs 中链接样式表和要求它们之间有什么区别? [英] What is the difference between linking stylesheets and requiring them in Webpack + VueJs?

问题描述

使用 VueJs 和 Webpack 组合，我发现要包含外部样式表(例如引导程序)，您可以执行以下两项操作之一:

Using the VueJs and Webpack combo I have figured out that to include external stylesheets (for example bootstrap) you can do one of two things:

在您的主要 js 脚本中，您可能需要这样的样式表:

In your main js script you could require the stylesheet like this:

require('./assets/lib/bootstrap.min.css');

或者您可以简单地将其移动到通过 Express 访问的静态文件夹并将其链接到您的主 html 文件中:

Or you could simply move it to a static folder accessed via Express and link it in your main html file:

<link rel="stylesheet" type="text/css" href="/static/css/lib/bootstrap.min.css">

这两种方法有什么区别?我不太明白在链接上使用 require 的优势(除非我猜每个组件都在本地工作?).使用一种比另一种有什么优势吗?

What is the difference between these two approaches? I don't quite see the advantage of using require over a link (unless that works locally per component I guess?). Are there any advantages in using one over the other?

推荐答案

要求方法:

• 由 webpack 捆绑
• 某些库可能无法打包开箱即用，可能需要额外配置
• 您可以使用各种技巧，例如将所有 CSS 提取到一个文件中
• 另外，您可以决定不将它们拆分为单独的文件，您可以将所有 CSS 和 JS 放在 1 个文件中(非常方便的开发设置)
• webpack 可以将图像内联到 CSS 中，然后再嵌入到 JS 中
• 热重载 CSS 应该在这种方法中起作用(对库没有用)
• 像 libs 这样的大 CSS 使 webpack 开发服务器运行缓慢，因为它每次都必须重建它们

链接方法:

• 没有被 webpack 触及
• 可以从外部 CDN 提供服务，前提是您不需要从服务器提供服务
• 不灵活
• 它只是有效

Webpack 方法为您提供了更多的灵活性和可能性——它非常适合您的代码.我认为我的经验法则是，如果您不需要，就不要捆绑库，除非有理由这样做，因为您需要支付构建时间和有时额外的配置费用.

Webpack approach gives you much more flexibility and possibilities - it's very good for your code. I think my rule of a thumb would be not to bundle libraries if you don't have to, unless there is a reason for this as you pay with build time and sometimes extra configuration.

这篇关于在 Webpack + VueJs 中链接样式表和要求它们之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！