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

Question

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

我想使用 Grunt 来查看 scss 文件，仅重新编译发生更改的文件，然后使用类似 grunt serve 的内容刷新页面。 。在dev中，html页面应该有尽可能多的<link>标签，因为有 scss 文件。在产品中，我希望能够将它们全部连接到一个 main.css 文件中，例如 grunt build

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

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

Answer 1

答案很大程度上取决于两个因素:您使用什么框架(或没有)(我猜您正在使用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 %}

对于其他框架，有像这样的不同选项。

另外，还有一个有趣的 grunt 任务，名为 grunt-usemin 。看看它。

对你有帮助吗？