覆盖 Grunt 中的特定文件

Question

我有三个项目：项目 A，其中包含一个基本设置，其中包含要在许多不同项目中重复使用的文件，不可编辑。还有 Proj B 和 C，它使用 Proj A 中的文件作为其基础。每个项目都有自己的 Gruntfile。

我想在 Proj B 和 C 中自定义一些 JS 和 SCSS 文件（例如更改颜色/变量）。但是要知道 Proj A 可能会不时更新，因此我无法编辑任何这些基本文件，因为在将最新更改拉入 B 和 C 时它们会被覆盖。因此，我必须创建应该覆盖的自定义文件来自 Proj A 的文件。

1)

一种方法是复制我要编辑的文件，然后在文件名中添加“覆盖”：

ui/styles/sass/_override_colors.scss *（应该覆盖 ui/styles/sass/_colors.scss）* ui/scripts/_override_base.js （应该覆盖 ui/scripts/base.js）

然后的问题是：如何在我的 Gruntfile 中指定此规则，“如果存在以 '_override' 开头的任何文件，则应覆盖其等效文件”。 但是，如果我复制的文件很大，这可能不是可选的，因为这意味着两个非常相似的大文件。

2)

另一种方法是添加一个名为 _overrides.scss 的新文件，并将其添加到我的 @import 文件的最后。但是，如果我要更改很多东西，那将是一个坏主意，因为它可能过于混乱和庞大，并且还意味着重复代码（除非我只覆盖变量而没有类）。

您会采用哪种方法？有没有其他更好的方法来解决这个问题？

谢谢！

web.scss:
@import 'colors';
@import 'grid';
@import 'base';
// @import 'overrides'; ?


grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
        dev: {
            options: {
                style: 'expanded',
                sourcemap: true,
                quiet: true

            },
            files: {
                'styles/css/web.css':       'styles/sass/web.scss'
            }
        }
    },

    uglify: {
        site: {
            files: {
                'scripts/min/site.js': [
                    'scripts/dev/forms.js'
                    'scripts/dev/base.js'
                ]
            }
        }
    }, ....

Answer 1

我认为Gruntfile.js 级别不应该发生任何事情，因为这只涉及SASS。

如果您更喜欢覆盖方式，请将覆盖文件命名为 _appB.scss 和 _appC.scss 并将它们添加到编译中。这些文件不会变得臃肿只要您只在其中进行覆盖。

但是，您可能决定采用非覆盖方式并为每个应用程序创建专用选择器 - 这需要一些时间来适应，但从长远来看会更易于维护。这样，每个选择器都有自己的生活。

一个覆盖示例：

_appA.scss（常用样式）

.content { height: 80px; max-width: 980px; margin: 0 auto; }

_appB.scss

.content { height: 90px; }

_appC.scss

.content { height: 70px; max-width: 768px; }

标记

<div class="content"></div>

块/元素/修饰符“覆盖”示例：

_appA.scss（常用样式）

.content { height: 80px; max-width: 980px; margin: 0 auto; }

_appB.scss

.content--b { height: 90px; }

_appC.scss

.content--c { height: 70px; max-width: 768px; }

标记

<div class="content content--b"></div>
<div class="content content--c"></div>

上面的最后一个标记示例是BEM syntax 的表示，这是OOCSS 的流行版本。

我和我的同事维护复杂的产品，发现这个工作流程非常易于管理。