有没有办法将唯一的CSS文件导出到模块化CSS文件？

Question

我想知道是否可以将所有CSS都放入一个 Sass文件中，并将其编译成许多CSS文件，例如每页/模板/小组件一个。也许有一个webpack插件是谁做的？

最终目的是在不管理10-15个CSS文件的情况下优化我的CSS性能。

我想到的是：

@file main.css{
    html{
      //Some CSS
    }

    header{
      //Some CSS
    }
}

@file home.css{
    .homeContent{
      //Some CSS
    }
}

将编译为两个文件：main.css和home.css。

有人为此提供工具吗？还是您使用什么技术来管理CSS？

Answer 1

我不确定我会在这里看到优势吗？一个文件包含多个文件的内容，因此您可以输出多个文件。我可以理解，不想管理15个源文件，但这似乎比实际上代表15个编译文件的一个文件所增加的复杂性要好得多。

单个文件很大，很难找到内容。给定您的代码示例，您似乎仍然想通过文件来组织代码。

可以将SCSS组织成组件，而不是按“页面”组织（当然，这取决于您的实际需求）。如果SCSS文件带有下划线_home.scss前缀，则不会生成CSS文件。您可以利用此功能来组织事物，然后通过导入所需的组件而拥有一个可以准确输出所需内容的文件。

• components/_tables.scss
• components/_buttons.scss
• components/_images.scss
• 等

然后在home.scss中导入所需的内容：

@import 'components/tables;
@import 'components/buttons;

#home-content {
  background: red;
  //whatever else...
}