Grunt – 在dev中编译并导入单独的sass，但在编译时连接它们
所以我有一个包含许多scss文件的文件夹。 我曾经把@import全部导入一个大的main.scss文件。 但随着时间的推移，文件变大了，整个文件重新编译之后，现在需要20多秒才能看到变化的结果。
我想使用Grunt来观察scss文件，只重新编译一个已经改变的文件，然后用grunt serve刷新页面。 在dev中，html页面应该包含与scss文件一样多的<link>标签。 在prod中，我想能够将它们连接成一个类似grunt build main.css文件
此外，请注意，我有一些variables.scss文件，可能在任何部分中使用。 所以他们也应该可以访问这些variables。
我不知道从哪里开始。 任何帮助将非常感激。
anwser严重依赖于两个因素：你使用什么框架（或没有）（我想你正在使用node ），你如何构build你的文件。
关于如何构build你的sass项目有很多不同的做法。 这里有一些链接： sassway ， sitepoint ， yeoman生成器 。 我正在使用以下结构：
- scss/ - - modules/ - - - first_app/ - - - - module.scss (main file for a module) - - - - body.scss - - - - footer.scss - - - second_app/ - - - - ... - - partials/ - - - resets_and_fixes.scss - - - brand.scss # (for constants) - - functions/ - - - functions.scss - - - mixins.scss - - main.scss (project's main file)
在每个模块中使用module.scss的好处是可以轻松地为单个模块加载所需的样式。 而且它很容易包含在main.scss 。 我有两个sass任务，它们是这样定义的：
sass: { dev: { options: { noCache: false, // disabling cache style: 'expanded', sourcemap: 'file' // auto, file, inline, none }, // use script to crawl all the modules or set only one you are currently working at: files: { expand: true, flatten: true, cwd: path.join('scss', 'modules', module.name), src: ['**/*.scss'], dest: path.join('build', module.name, 'css', 'src')), ext: '.css' } }, build: { options: { noCache: false, // disabling cache style: 'compressed', sourcemap: 'none' // auto, file, inline, none }, files: { // build the main.scss file, or each 'module.scss' separately 'build/main/css/main.css': 'scss/main.scss' //, // crawlModulesForMainFiles() } } }
在我的模板（我正在使用Django），我有以下设置：
{% if debug %} <link rel="stylesheet" type="text/css" href="urls/to/my/dev/files" /> {% else %} <link rel="stylesheet" type="text/css" href="build/main/css/main.css" /> {% endif %}
对于其他框架，有这样的不同的选项。
另外，还有一个叫做grunt-usemin的咕噜咕噜任务。 看看它。
是不是对你有帮助？