如何在 Vue 应用中的每个组件中导入 Sass 文件

如果您正在开发一个大型的 Vue 应用程序，那么您很有可能会在某个时候想要组织应用程序的结构，以便为 CSS 定义一些全局变量，以便在应用程序的任何部分使用。

这可以通过将这段代码写入应用程序中的每个组件来实现

<style lang="scss">
  @import "./styles/_variables.scss";
</style>

但是谁有时间做这个？！我们是程序员，让我们以编程的方式来做。

为什么？

您可能想知道为什么要这样做，尤其是在您刚开始学习 Web 开发时。全局变量不好，对吧？为什么我们需要这个？Sass 变量到底是什么？如果您已经了解所有这些，那么您可以跳到下一节查看实现。

大大小小的公司往往每隔一到两年就会进行一次重新设计。如果您的代码库很大，由很多人管理，并且您需要将所有地方的line-height从1.1rem更改为1.2rem，您真的想回到每个模块并更改该值吗？全局变量在这里变得非常有用。您可以决定哪些可以在顶层，哪些需要由其他较小的部分继承。这避免了 CSS 中的意大利面条代码，并使您的代码保持DRY。

我曾经在一个拥有庞大而分散的代码库的公司工作。在重大版本发布的前一天，上面传达了命令，要求我们更改主要品牌颜色。因为代码库设置良好，并且正确定义了这些类型的变量，所以我只需要在一个位置更改颜色，它就会传播到 4000 个文件中。这非常强大。我还可以避免熬夜才能及时完成更改。

样式与设计有关。**好的设计本质上在保持一致时才能成功。**一个重用通用结构部分的代码库看起来更统一，也往往看起来更专业。如果您必须在每个组件中重新定义应用程序的一些基本部分，它将开始崩溃，就像在经典的传话游戏中一样。

全局定义也可以供设计师进行自我检查：“等等，我们还有另一个三级按钮？为什么？”这种模型可以很好地显示 UI/UX 中的一致性漏洞。

如何操作？

首先，我们需要安装vue-cli 3。然后我们创建我们的项目

npm install -g @vue/cli
# OR
yarn global add @vue/cli

# then run this to scaffold the project
vue create scss-loader-example

当我们运行此命令时，我们将确保使用具有 Sass 选项的模板

? Please pick a preset: Manually select features
? Check the features needed for your project:
  ◉ Babel
  ◯ TypeScript
  ◯ Progressive Web App (PWA) Support
  ◯ Router
  ◉ Vuex
❯ ◉ CSS Pre-processors
  ◉ Linter / Formatter
  ◯ Unit Testing
  ◯ E2E Testing

其他选项由您决定，但您需要选中 CSS 预处理器选项。如果您有一个现有的 vue cli 3 项目，请不要担心！您也可以运行

npm i node-sass sass-loader
# OR
yarn add node-sass sass-loader

首先，让我们在 src 目录中创建一个新文件夹。我将其命名为styles。在其中，我创建了一个_variables.scss文件，就像您在像 bootstrap 这样的流行项目中看到的那样。目前，我只是在其中放入一个变量进行测试

$primary: purple;

现在，让我们在项目根目录（与您的package.json位于同一级别）中创建一个名为vue.config.js的文件。在其中，我们将定义一些配置设置。您可以在此处阅读有关此文件的更多信息。

在其中，我们将添加前面看到的那个导入语句

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.scss";`
      }
    }
  }
};

读者 Dan Danciu 指出，从 sass-loader 8 开始，data 需要改为 prependData。

读者 Esteban Jelicich 指出，从 sass-loader 9 开始，data 需要改为 additionalData。

好的，这里需要注意几个关键点

• 您需要关闭并重新启动本地开发服务器才能使这些更改生效。
• 目录结构中styles之前的@/将告诉此配置文件在src目录中查找。
• 您不需要在文件名中使用下划线才能使它工作。这是一个 Sass 命名约定。
• 您导入的组件需要在.vue单文件组件的样式标签上具有lang="scss"（或sass、less 或您正在使用的任何预处理器）属性。（请参阅下面的示例。）

现在，我们可以进入我们的默认App.vue组件并开始使用我们的全局变量了！

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  //this is where we use the variable
  color: $primary;
  margin-top: 60px;
}
</style>

这是一个可工作的示例！您可以看到我们应用中的文本变成了紫色

感谢 Ives 创建了 CodeSandbox，为我们设置了特殊的配置，以便我们可以在浏览器中看到这些更改。如果您想更改此沙盒，左侧边栏中有一个特殊的**服务器控制面板**选项，您可以在其中重新启动服务器。感谢，Ives！

就是这样！您不再需要重复执行在整个 Vue 应用程序中@import相同变量文件的任务。现在，如果您需要重构应用程序的设计，您可以在一个地方完成所有操作，它将传播到整个应用程序。这对于规模较大的应用程序尤其重要。