Question

我正在使用单个文件组件进行大型项目。除了CSS之外，一切都很好。

对于该项目，我需要bootstrap 4和其他全局样式。但是，如果我不将它们包含在每个组件中，则构建过程将失败。而且，如果我将它们包含在每个组件中，则由于CSS代码重复：-/。

那么如何正确处理此问题？

谢谢

Answer 1

将它们包括在根组件的<style></style>块中。请注意，CSS @import被视为反模式，因此在生产前在一个或几个文件中构建全局CSS。

<template>
  <div id="app"></div>
</template>

<style>
  @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
</style>

或者将<link></link>放入index.html的<head></head>中。

<head>
  ...
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  ...
</head>

如何正确使用CSS导入进行SFC而不进行重复？

1 个答案: