css - 如何使用 Mean.io 安装 SASS？

Question

我有一个基本的 MEAN.io 设置。令我困惑的是包结构。我想在最终版本中使用 .scss 文件并将 SASS 编译成 .css 文件，但我不是 100% 确定它是如何工作的，因为我'我只是想学习。

我已经阅读了 MEAN.io 团队提供的关于如何使 css 文件“全局化”的文档，但我仍然不确定如何预处理 .scss 文件。

我没有尝试太多，因为我不确定该怎么做。 MEAN.io 似乎默认使用 Gulp。我从未收到询问我更喜欢 Gulp 还是 Grunt 的提示(如 MEAN.io 的博客所示)。

任何帮助或示例都会非常有帮助。我查看过 Google，但我发现的大部分内容都是 MEAN.js 的内容。 :(

谢谢!

Answer 1

要处理 .scss 文件，您几乎可以复制 less 配置。

1. 安装 gulp sass

   npm install gulp-sass --save-dev

2. 更新 gulp/development.js

   路径 = {
...
萨斯:[
'包/**/*.scss',
'!packages/**/node_modules/**',
'!packages/**/assets/**/lib/**'],
...
};

3. 创建一个运行 sass 的 gulp 任务

   gulp.task('sass', function() {
返回 gulp.src(paths.sass)
.pipe(plugins.sass().on('error', plugins.sass.logError))
.pipe(gulp.dest('./packages'));
});

4. 此时您应该能够运行 gulp sass 并且它应该可以工作，但是为了让它在您运行 gulp 时运行并查看文件，请参阅接下来的两个步骤。

5. 将 gulp 任务添加到 defaultTasks(如果需要，可以删除 less)

   var defaultTasks = ['coffee','clean', 'less', 'sass', 'csslint', 'devServe', 'watch'];

6. 添加监视任务

   gulp.task('watch', function () {
...
gulp.watch(paths.sass, ['sass']);
});