grunt 在 sass 文件中看不到导入

Question

grunt 工作得很好。

我在 Gruntfile.js 中将这个属性用于 css

    sass: {
        dist: {
            files: {
                'src/css/style.css': 'src/css/style.scss'
            }
        }
    },      


    cssmin: {
        combine: {
            files: {
                'css/cssmin.css': ['src/css/style.css']
            }
        }
    },

    watch: {
        scripts: {
            files: 'src/js/*.js',
            tasks: ['jshint', 'concat', 'uglify']
        },

        css: {
            files: 'src/css/*.scss',
            tasks: ['sass', 'cssmin']
        }
    }

所以一切都很酷，但在 css 文件夹中我有三个文件： 1.style.css 2.style.scss 3.sn-ps.scss

所以，为了测试，我在那里设置了简单的属性。在 style.scss 中

$color: #fff;

@import 'snippets.scss';

body{
    height: 100px;
    width: 100px;
    background: #000;
    color: $color;
    font-size: 14px;
}

p{
    color: black;
    font-size: 20px;
    background: lightgreen;
}

在 sn-ps.scss 中也是如此：

body{
    width: 10000px;
    height: 50000px;
    background: #fff;
}

所以当我打开 grunt 时，一切正常，并且在文件 cssmin.css 中我得到内联属性：

body{height:100px;width:100px;background:#000;color:#fff;font-size:14px}p{color:#000;font-size:20px;background:#90ee90}

但是你看，@import 'sn-ps.scss' 中没有任何来自 import 的属性。 我怎么了？如您所见，我不使用指南针插件。

Answer 1

在编译输出 CSS 时，您可以在控制台中看到什么？可以发在这里吗？

另一件事是，如果您不需要同时生成 CSS 文件：styles.css 和 snippets.css，最好将您的 snippets.scss 重命名为 _snippets.scss 并将样式更改为：

$color: #fff;

@import '_snippets';

body{
    height: 100px;
    width: 100px;
    background: #000;
    color: $color;
    font-size: 14px;
}

p{
    color: black;
    font-size: 20px;
    background: lightgreen;
}

您将只有一个输出 CSS 文件，结果会更清晰。