Node.js Grunt-在dev中编译和导入单独的sas，但在构建时将它们连接起来

所以我有一个包含许多scss文件的文件夹。 我曾经@import将它们全部导入到一个大的main.scss文件中。但随着时间的推移，文件变得越来越大，在重新编译整个文件后，现在需要20多秒才能看到更改的结果

我想使用Grunt来查看scss文件，只重新编译更改的文件，并使用类似于

Grunt-service

的内容刷新页面。 在dev中，html页面应该具有与scss文件一样多的

标记。 在prod中，我希望能够将它们连接到一个main.css文件中，类似于

grunt build

另外，请注意，我有一些variables.scss文件，可以在任何部分中使用。因此，他们也应该能够访问这些变量

我不知道从哪里开始。

---

任何帮助都将不胜感激。

anwser很大程度上取决于两个因素：您使用的是什么框架（或没有框架）（我猜您使用的是

节点

），以及您如何构建文件

关于如何构建您的

sass

项目，有许多不同的实践。这里有一些链接：。我使用以下结构：

- 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

task，定义如下：

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 %}

{%if debug%}
{%else%}
{%endif%}

对于其他框架，有不同的选项，比如这个

另外，还有一个有趣的咕噜任务，叫做。看一看

这对你有帮助吗