Vue项目里什么时候把CSS代码写成外部样式文件？

Question

对于前端没什么经验，网上的无效信息太多，也搜索不到相关信息。在写一个SFC时，我不知道什么时候写到style标签里,还是写到一个外部样式文件然后引用。

Answer 1

通常来说，你可以在style标签中编写组件内部的样式，或者将组件样式单独写成一个外部的CSS文件并通过引入的方式使用。

如果你的组件样式比较少，可以直接写在组件内部的style标签中，这样可以让组件的结构和样式都在同一个文件中，方便维护和管理。当然，如果你的样式比较多，可以将其独立成外部的样式文件，这样可以更好地组织和管理样式，并且可以在多个组件之间共享。

当你需要在多个组件中复用相同的样式时，你可以将这些样式提取到一个单独的CSS文件中，然后在需要使用这些样式的组件中通过引入CSS文件的方式使用。这样可以减少代码冗余，提高代码复用率。

在实际开发中，选择内部样式还是外部样式取决于具体的情况，比如样式复杂度、代码组织结构、维护和管理需求等。你可以根据具体情况来选择最适合的方案。

Answer 2

样式少 直接 写 style 里 ，多的话 可以 外部样式 。还有 就是 如果 某一段 css要复用 ，建一个 css文件 然后外链 就行

Answer 3

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以参考下这篇文章：Vue打包项目时在处理css文件过程报错(Error processing file: static/css/app.xxx.css)
• 除此之外, 这篇博客: vue项目中引入全局css中的 一、使用样式的文件部分代码 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  <div>
  	<p>友情链接：</p>
  	<div>
  		<a href="#" target="_blank">
  			<p class="p-hover">链接1</p>
  		</a>
  		<a href="#" target="_blank">
  			<p class="p-hover">链接2</p>
  		</a>
  		<a href="#" target="_blank">
  			<p class="p-hover">链接3</p>
  		</a>
  	</div>
  </div>
  
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^