覆盖Grunt中的特定文件

Question

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

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

1）

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

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语法的表示形式，这是OOCSS上的一种流行用法 。

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