在单个 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 导入。