如何正确地在 Vue 中全局导入 css 样式？答案

【问题标题】：How to globally import css styles in Vue properly?如何正确地在 Vue 中全局导入 css 样式？
【发布时间】：2020-11-17 10:09:34
【问题描述】：

我有一个包含几个类的 scss 文件。每次我保存文件时，都会生成相应的 css 文件。我以为我只需要在 main.js 文件中导入一个结果 css 就可以在我的整个应用程序中使用它。例如，假设我在 index.scss 中包含以下 css 类：

.button-label {
  color: white;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: bold;
}

我像这样在 main.js 中导入了它的文件：

import "@/assets/styles/index.css";

...

const vm = new Vue({
  store,
  router,
  Snotify,
  vuetify,
  render: h => h(App)
}).$mount("#app");

export default vm;

我希望，现在我可以在我的应用程序中的每个组件中使用按钮标签类。不幸的是，它不起作用。似乎给定的类被忽略了。我是否必须在我的组件中另外导入提到的文件？我究竟做错了什么？如何正确全局导入样式表？谢谢你的帮助。我的 index.html 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

【问题讨论】：

您可以使用普通的style 标签链接到index.html 中输出的CSS
好吧，我已经尝试使用标签将其导入那里，但仍然没有成功。也许我的css有问题？整个文件看起来像这样pasteboard.co/JALrGHd.png
您能在帖子中添加index.html 和您的文件结构吗？
当然，我已将 index.html 文件（但没有链接）附加到帖子中。这是我的结构：pasteboard.co/JALx5yn.png
假设index.min.css拥有你所有的风格，你链接到../src/assets/styles/index.min.css了吗？

标签： javascript css vue.js

【解决方案1】：

我没有在我的 vue 组件中使用 SCSS 文件，但是对于我的单文件组件（vue SFC），我在 App.vue（主模板文件）中添加了我的全局样式表的链接，如下所示，它可以工作：

<style src="../public/styles/style.css"></style>

在我的文件结构中，App.vue 位于“src”文件夹中，index.html 和样式集位于“public”文件夹中，但我认为这并不重要。

【讨论】：