Question

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

我想使用Grunt来监视scss文件，只重新编译已更改的文件，并使用grunt serve之类的内容刷新页面。在dev中，html页面应该包含与scss文件一样多的<link>标记。在prod中，我希望能够将它们全部连接到一个main.css文件中，例如grunt build

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

我不知道从哪里开始。任何帮助将不胜感激。

Answer 1

anwser严重依赖于两个因素：你使用什么框架（或者没有）（我猜你正在使用node）以及如何构建你的文件。

关于如何构建sass项目，有很多不同的做法。以下是一些链接：sassway，sitepoint，yeoman generator。我使用以下结构：

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

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

Alternatevly，有一个有趣的grunt任务，名为grunt-usemin。看看吧。

对你有帮助吗？

Grunt - 在dev中编译并导入单独的sass，但在构建时将它们连接起来

1 个答案: