在单个vue组件中包含本地CSS文件

Question

在构建Laravel vue SPA时，我需要知道如何仅在单个vue组件中包括本地CSS文件？

Answer 1

您可以像这样通过@import使用scss：

<style lang="scss" scoped>
  @import '../css/mycss.scss'; /* injected */
  @import '../css/mycss.css'; /* will use url import (do not use)*/
</style>

这可能需要您添加node-sass依赖项，并对Webpack配置进行一些调整（如果还没有的话）。但是，如果您使用的是Vue cli生成的项目，则可能已包含该项目。

请注意，如果要对CSS进行范围划分，则应将扩展名重命名为.scss，这样，它将由vue-loader处理。导入.css文件的工作方式不同，被视为url导入。

Answer 2

您可以在脚本标签内的组件上导入 CSS 文件

这对我有用：

<template>
</template>

<script>
import "@/assets/<file-name>.css";

export default {}
</script>