Grunt沒有編譯Sass到CSS

我無法弄清楚Gruntfile有什麼問題，但我的理解是，sass任務將abc.scss編譯爲abc-exp.css，然後cssmin將abc -exp.css並生成abc.css。最後，watch任務將運行css任務，其中包括sass和cssmin。然而，只有在我第一次運行我的任務時纔會生成準確的CSS，然後在任何後續更改中都不會生成任何內容。Grunt沒有編譯Sass到CSS

我的項目結構爲：

_themes/ABC/CSS/ABC-exp.css
_themes/ABC/CSS/abc.css
_themes/ABC /上海社會科學院/ abc.scss
_themes/ABC/SASS /分音
_themes/ABC/SASS /分音/ _base.scss
_themes/ABC/SASS /分音/ _variables.scss
_themes/ABC /上海社會科學院/諧音/ _mixins.scss

Gruntfile：

module.exports = function(grunt){ 

    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); 

    grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 

    sass: { 
     build: { 
     files: { 
      '_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss' 
     } 
     } 
    }, 

    // autoprefixer: { 
    // build: { 
    //  src: '_themes/abc/css/abc-exp.css', 
    //  dest: '_themes/abc/css/abc-exp.css' 
    // } 
    // }, 

    cssmin: { 
     build: { 
     src: '_themes/abc/css/abc-exp.css', 
     dest: '_themes/abc/css/abc.css' 
     } 
    }, 

    // cssbeautifier: { 
    // files: ['_themes/abc/css/abc-exp.css'], 
    // options: { 
    //  indent: ' ', 
    //  openbrace: 'end-of-line', 
    //  autosemicolon: false 
    // } 
    // }, 

    uglify: { 
     options: { 
     }, 
     my_target: { 
     files: { 
      '_themes/abc/js/abc-min.js': ['_themes/abc/js/abc.js'], 
      '_themes/abc/js/abc-bottom-min.js': ['_themes/abc/js/abc-bottom.js'] 
     } 
     } 
    }, 

    watch: { 
     css: { 
     files: ['_themes/abc/sass/*.scss'], 
     tasks: ['css'] 
     }, 
     js: { 
     files: ['_themes/abc/js/abc.js', '_themes/abc/js/abc-bottom.js'], 
     tasks: ['js'] 
     } 
    }, 

    browserSync: { 
     dev: { 
     bsFiles: { 
      src: [ 
      '_themes/abc/css/*.css', 
      '_themes/abc/img/*', 
      '_themes/abc/js/*.js', 
      '_themes/abc/**/*.html', 
      '_themes/abc/**/*.md' 
      ] 
     }, 
     options: { 
      watchTask: true, 
      proxy: 'wifi.dev:8888' 
     } 
     } 
    } 
    }); 

    // grunt.registerTask('default', ['browserSync', 'watch']); 
    // grunt.registerTask('css',  ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']); 
    // grunt.registerTask('buildcss', ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']); 
    // grunt.registerTask('js',  ['uglify']); 
    // grunt.registerTask('buildjs', ['uglify']); 

    grunt.registerTask('default', ['browserSync', 'watch']); 
    grunt.registerTask('css',  ['sass', 'cssmin']); 
    grunt.registerTask('js',  ['uglify']); 

};

來源

2016-09-15 Mario Parra

我認爲你需要dist像這樣更換build：

sass: { 
    dist: { 
    files: { 
     '_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss' 
    } 
    } 
},

爲了使watch可觀察到的任務，您需要將其從css更改爲sass

watch: { 
    sass: { 
    files: ['_themes/abc/sass/**/*.{scss,sass}'], 
    tasks: ['sass'] 
    }, 
    ... 
},

來源

2016-09-15 18:21:43

我試過了，但Grunt的手錶任務仍然沒有檢測到任何變化。 –

回答更新瞭如何觀看sass –

Grunt沒有編譯Sass到CSS

回答

相關問題