我在 Vue CLI 3 项目中的 SCSS 设置

直到 Vue.js 出现，我才意识到自己对开发的热情已经消退了一些。我仍在学习，但它让我重新感受到了编程的乐趣。我断断续续地玩了一段时间，现在我又开始用 Vue 从零开始搭建自己的网站了。

最让我头疼的事情之一就是项目结构。很多教程都没怎么讲。最终我终于把它拼凑起来，然后遇到了下一个问题：SCSS。

我找不到太多关于人们通常如何处理全局样式以及每个组件内部样式的信息。我有一些想法，但不知道该如何实际实现。如果你也遇到类似的情况，希望这篇文章能对你有所帮助。

以下是我从头开始创建 Vue CLI 3 应用程序的方法……

创建应用程序

假设您已安装 Vue CLI 3，请在终端中运行以下命令以在浏览器中启动 Vue 项目管理器。

vue ui

如果您尚未安装，这里有您需要的文档。

要创建应用程序，只需点击Vue 项目管理器屏幕顶部的“创建”按钮即可。这将引导您完成通常需要在终端中执行的各个步骤，并允许您将设置保存为预设。非常方便！

对于我的项目，我倾向于选择以下选项：

• 包管理器：Yarn
• 预设：手动（针对第一个项目）
• 功能：Babel、路由器、CSS 预处理器、Linter/Formatter
• 历史模式：开启
• 预处理器：SCSS/SASS
• Linter/Formatter：ESLint + Prettier（保存时检查 Lint）

然后点击“创建项目”，它将创建你的应用。现在你应该有一个基本的 Vue.js 项目了。你可以前往 Vue 项目管理器中的“任务”选项卡，点击“服务”来运行它，在本地启动你的网站。

设置我们的样式

首先，在 src 文件夹中创建一个名为style的文件夹。我们将在这里存储应用程序的所有 SCSS 文件。在此文件夹中，创建一个用于全局样式的文件，例如global.scss。

在 Vue 项目管理器中，转到“插件”选项卡，然后单击“添加插件”按钮。我们要安装一个名为vue-cli-plugin-style-resources-loader 的插件。

安装完成后，它会在项目根目录下添加一个名为vue.config.js的文件

转到vue.config.js并添加以下代码，将样式表名称/路径替换为您为全局样式命名的 scss 文件。

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [path.resolve(__dirname, "./src/styles/global.scss")]
    }
  }
};

现在，global.scss 中的所有样式都将在整个项目和组件中可用。通常，我的 SCSS 文件结构如下所示：

我在 _base.scss 文件中定义了基本的富文本样式，变量、字体等等都以局部样式的形式存储在各自的文件夹中。然后，它们被导入到全局样式表中，如下所示：

@import "setup/normalize.scss";
@import "setup/typography.scss";
@import "setup/variables.scss";
@import "setup/mixins.scss";

@import "basics/base.scss";
@import "basics/layout.scss";
@import "basics/links.scss";
@import "basics/buttons.scss";

我在样式目录中还有一个用于存放组件的文件夹。我在 Vue 中创建的每个组件都有自己的 scss 局部视图。Vue.js 的一个实用功能是，你可以在 Vue 组件文件中添加样式，并且可以限定这些样式的作用域，以便仅在页面上渲染该特定组件时才会渲染它们。

现在一切就绪，给组件添加样式就很容易了。以下是在我的组件Example.vue中的样子

<template>
  <div>
    <h1>I am a component!</h1>
  </div>
</template>

<script>
export default {
  name: Example
}
</script>

<style lang="scss" scoped>
@import "../styles/components/example.scss";
</style>

在_example.scss文件中，你可以访问所有变量/字体/混合以及你在全局样式中添加的所有内容。你也可以在 style 标签中像这样写，其中$c-title是标题颜色的全局变量名：

<style lang="scss" scoped>
h1 {
  color: $c-title;
}
</style>

不过，我更喜欢将所有样式放在一个地方（styles文件夹及其子文件夹），文件名与组件名称相同。这样更容易查找，也方便其他人使用。

这篇文章有点长，如果你读到这里，非常感谢！希望以上内容能对你有所帮助。祝你 Vue 项目愉快，创造精彩作品！