grunt 如何配置 sass 文件编译到 css 文件？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

现在一般来说，css文件都是由scss或者less之类的文件，编译完成的了。很少会单独写css文件了。据说是因为，手写css文件，就是会显得有些low。不管如何，苏南大叔认为：要赶得上趋势，对吧？即使赶不上，也要努力不让自己差的太远。在本文中，苏南大叔描述的就是：如何配置grunt任务，做到scss文件到css的编译。

当然，关于scss/sass/less这些东东，到底有什么区别，并不是本文的讨论范围。

安装编译器

首先要明确的观点是：grunt的sass插件，仅仅是个调用。ruby和sass编译器的安装，是没跑的。那么，对于开发者来说，就是个比较大的安装量了。

请确认安装好了ruby环境，下面的两个链接，是描述如何安装ruby的。

• 《win系统安装ruby》 https://newsn.net/say/ruby-install-win.html
• 《mac系统安装ruby》 https://newsn.net/say/ruby-install-mac.html

安装好ruby之后，就需要利用gem安装sass编译器。

gem install sass

安装grunt插件

一切准备就绪，只欠东风！苏南大叔在项目根目录下面安装了模块grunt-contrib-sass。

npm install grunt-contrib-sass --save-dev

完整配置代码

下面的是完整的Gruntfile.js的源码：

module.exports = function (grunt) {
    pkg: grunt.file.readJSON('package.json'),
            grunt.initConfig({
                meta: {
                    srcPath: '../',
                    deployPath: './build/'
                },
                sass: {
                    dist: {
                        files: {
                            '<%= meta.srcPath %>css/css.css': '<%= meta.srcPath %>css/css.scss'
                        },
                        options: {
                            sourcemap: 'none',
                            style: 'compressed'
                        }
                    }
                },
            });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.registerTask('default', ['sass']);
}

这里定制了sass编译的两个参数，分别是：

sourcemap: 'none',
style: 'compressed'

更多参数，可以参见这里：

• https://sass-lang.com/documentation/file.SASS_REFERENCE.html#options

执行方式

执行grunt的方式很简单，就是在Gruntfile.js的所在目录，执行下面的命令即可：

grunt

总结

grunt是比较常用的前端工具，大家一定要掌握它的基本用法。更多grunt相关经验文章。请点击：

• https://newsn.net/tag/grunt/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。