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

【问题标题】：Include local CSS files in a single vue component在单个 vue 组件中包含本地 CSS 文件
【发布时间】：2019-05-18 23:12:03
【问题描述】：

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

【问题讨论】：

【解决方案1】：

您可以通过scss 使用@import，如下所示：

<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 导入。

【讨论】：

【解决方案2】：

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

这对我有用：

<template>
</template>

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

export default {}
</script>

【讨论】：