Question

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

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

1）

执行此操作的方法可能是复制我要编辑的文件，只需添加＆＃39;覆盖＆＃39;它的文件名：

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

问题是：如何在我的Gruntfile中指定此规则，＆＃34;如果任何文件以＆＃39; _override＆＃39;开头。存在，应该覆盖其等效文件＆＃34;。但是，如果我复制的文件很大，那么这可能不是可选的，因为它意味着两个非常相同的大文件。

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>

块/元素/修饰符＆＃34;覆盖＆＃34;示例：

_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的热门看法。

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

覆盖Grunt中的特定文件

1 个答案:

覆盖示例：

块/元素/修饰符＆＃34;覆盖＆＃34;示例：