学习使用模块化方法。必须保存多个文件才能看到 css 的结果？

Question

好的，我正在尝试学习使用模块化方法对我的 css 进行可扩展和模块化开发。我的文件结构与此类似。

File Structure

现在，我在打开和关闭的每个元素上都有一个红色边框，它可以帮助我在定位元素时进行可视化。它是我的 _grid.sass 文件中的第一行代码。我有一个名为 main.sass 的文件，只有

@import '_base.sass' 
@import '_grid.sass' 
@import '_colors.sass'

里面。然后，我使用 atom 编辑器的自动编译将 main.sass 转换为链接到 html 文件的 main.min.css。因此，如果我在 _grid.sass 中关闭边框属性。我必须保存该文件，然后保存 main.sass，然后再次保存 _grid.sass。我一定是做错了什么，因为如果我想开发一个像这样的整个网站，我将不得不为每个单独的更改保存 3 次，这将在一分钟内增加大约 500 万次冗余保存。有人可以给我一些这方面的信息吗？

Answer 1

我假设您使用的是 sass-autocompile 包。虽然这对于单个文件项目非常有用，但对于较大的项目就不太适用了。

相反，我建议使用像 gulp or grunt 这样的构建系统。我更熟悉 gulp，所以这里是我的构建系统的修改版本，可以与您的项目结构一起使用。

为了使用它，您需要安装 gulp 和导入的其他包。

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');

gulp.task('default', function() {
    return gulp.src('stylesheets/main.scss')
        .pipe(
            sass({
                outputStyle: 'compressed',
                includePaths: ['stylesheets/modules', 'stylesheets/partials', 'stylesheets/vendor']
            }).on('error', sass.logError)
        )
        .pipe(rename('compiled.css'))
        .pipe(gulp.dest('stylesheets'));
});

此外，您不需要（也不应该）在部分名称中包含下划线和扩展名，因此请使用 @import 'base'; 而不是 @import '_base.scss';

学习使用模块化方法。必须保存多个文件才能看到 css 的结果？

Learning to use a modular approach. Have to save multiple files to see result of css?

import

modularity

sass

save

repeat