设计：共享相似 Sass 的两个 Vue 组件

Question

我正在讨论我应该如何设计我的 Vue 组件。这是问题所在：我有两个 Vue 组件共享相同的 sass。但是，每个都有稍微不同的标记、状态和方法。我想知道如何减少sass 代码重复的数量。我不想在两个不同的组件中有两次基本相同的标记和样式。因此，我想知道最好的方法是什么。

---

可能的解决方案 1：

制作一个base 组件，该组件具有两个组件都使用的必要sass。包括 slots 以传递来自其他两个组件的标记。在其他两个组件中，添加base 组件并将标记传递给slots。这通过保留base 组件中所需的所有常见sass 来减少sass 重复的数量。

可能的解决方案 2：

使用所有常见的 css 创建一个额外的 sass 文件，然后将其导入需要样式的组件文件中。我不确定这在Vue 世界中是否可以接受。我从未见过作者为sass 提供单独文件的项目。它总是只包含在单个文件组件中。在styles 目录中，人们通常只包含全局变量和mixin。它们不包括仅在两个组件中使用的样式。

可能的解决方案 3：

将这两个组件合二为一，并使用布尔值和条件来确定在该组件中使用什么标记和状态。我觉得这是一个糟糕的设计，因为它本质上就像将布尔参数传递给函数。它违反了单一职责原则。它将组件分成两个不同的部分，我觉得在发生这种情况时最好有两个组件而不是一个，以防止出现分歧。

---

到目前为止，除了在两个不同的文件中重复 sass 之外，这些是我能想到的唯一解决方案。我知道 sass 中的 mixin，但我不确定应该将 mixin 放在哪里。这将进入哪个目录，我将如何组织它？此外，我也知道 Vue 中的 mixins，但我不认为 Vue mixins 允许将 sass 放置在其中。这是我现在面临的一个大难题。任何帮助表示赞赏。提前致谢。

Answer 1

在 webpack.config 中为 sass 使用模块规则可能对您有用，其中所有 vue 组件将共享相同的存档或变量（您选择！）；

解释得更好

首先，您的应用中必须有 sass-loader。 要知道您的应用程序中是否已经拥有它，请查看您的 package.json 并搜索它。如果你还没有...运行：npm install -D sass-loader。

现在你有了它，你可以在你的 webpack.config.js 中设置以下配置：

module: {
        rules: [
          // ... other rules omitted
   
          {
            test: /\.scss$/,
            use: [
              {
                loader: 'sass-loader',
                options: {
                  additionalData: `@import "resources/css/sass/_variables.scss";`
                }
              }
            ]
          }
        ]
      },

您在 additionalData 中添加的所有内容就像您添加到所有 Vue 组件中一样。它应该可以正常工作。

但是我没有 webpack.config.js...

所以，如果您不这样做，请不要担心。如果您使用 @vue/cli 启动项目，这将是您的问题。

1. 在 vue 项目 的根目录下创建一个名为 vue.config.js 的文件； 2. 在其中粘贴以下代码：

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      // @/ is an alias to src/
      // so this assumes you have a file named `src/variables.sass`
      // Note: this option is named as "prependData" in sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },


      scss: {
        additionalData: `@import "~@/variables.scss";`
      },


      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

有 3 个不同的选项：scss、sass 和 less。您选择一个更方便的并删除其他的。

希望对你有所帮助！