我正在讨论如何设计Vue组件。这是问题所在：我有两个共享相同sass的Vue组件。然而，每个人都有一个稍微不同的标记，状态和方法。我想知道如何减少sass代码重复的次数。我不想在两个不同的组件中具有相同的标记和样式两次。因此，我想知道最好的方法是什么。
可能的解决方案1：
制作一个base组件，该组件具有两个组件都使用的必需的ass。包括slots，以传递来自其他两个组件的标记。在其他两个组件中，添加base组件并将标记传递到slots。通过保留sass组件中所需的所有公用sass，可以减少base重复的次数。
可能的解决方案2：
创建一个额外的sass文件与所有常见的CSS，然后只需要导入它需要的样式组件文件。我不确定在Vue世界中是否可以接受。我从未见过一个项目，其中作者为sass提供了一个单独的文件。它总是只包含在单个文件的组成部分。在styles目录中，人们通常只包括全局变量和混合。它们不包括仅在两个组件中使用的样式。
可能的解决方案3：
两个部件组合成一个和使用布尔值和条件以确定哪些标记和状态，以在一个部件使用。我觉得这是一个糟糕的设计，因为它本质上就像是将布尔参数传递给函数。它违反了单一职责原则。它将组件分为两个不同的部分，我觉得最好是有两个组件而不是一个组件，以防止发散。
除了重复在两个不同文件中使用sass之外，到目前为止，这些是我唯一想到的解决方案。我知道sass中的mixin，但是我不确定应该将mixin放在哪里。它将进入哪个目录，我将如何组织它？另外，我也知道Vue中的mixins，但是我不认为Vue mixins允许将sass放在其中。我现在遇到了一个很大的难题。任何帮助表示赞赏。预先感谢。
答案 0 :(得分：0)
在 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 组件一样。它应该可以正常工作。
所以，如果您不这样做，请不要担心。如果您使用@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。您选择一个对您更方便的，然后删除其他的。