Question

我正试图用咕噜咕噜的sass而且我有一种奇怪的行为。如果我使用下划线创建任何文件，它将不再起作用，并且它也不会导入。

这是我的Gruntfile，非常简单：

module.exports = function(grunt) {
    'use strict';

    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        watch: {
            sass: {
                files: 'scss/**/*.{scss,sass}',
                tasks: ['sass']
            }
        },
        sass: {
            example: {
                options: {
                    outputStyle: 'expanded'
                },
                files: {
                    'public/css/app.css': 'scss/**/*.{scss,sass}'
                }
            }
        }
    });

    grunt.registerTask('default', ['watch']);
};

如果我创建了一个文件，例如application.scss中的scss/，它会在app.css中工作并创建文件public/css，但如果我使用下划线创建任何文件例如：_variables中的scss/它不再起作用，它不会创建文件或更改任何内容，也不会导入。

application.scss：

@import "variables";

body {
    background-color: $bg-color;
}

_variables.scss：

$bg-color: red;

Answer 1

名称以下划线开头的文件在SASS眼中被视为部分文件。这意味着SASS不会从中产生实际的css文件。要防止出现这种情况，请创建一个index.scss文件并在其中导入部分内容或从名称中删除下划线。

Official DOcs

Answer 2

我通过使用：

解决了它

files: [{
    expand: true,
    cwd: 'scss',
    src: '**/*.{scss,sass}',
    dest: 'public/css',
    ext: '.css'
}]

Grunt sass @import没有制作CSS

2 个答案: