1

我有三个项目： Proj 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'
                ]
            }
        }
    }, ....
4

1 回答 1

-1

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

如果您更喜欢覆盖方式，请将覆盖文件命名为_appB.scssand_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 语法的表示，它是OOCSS的一种流行形式。

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

于 2014-04-08T21:02:12.293 回答