不要将所有 css 文件编译到 app.css 中，并在需要时手动包含其中的一些文件答案

【问题标题】：Don't compile all css file into app.css and include some of them manually when needed不要将所有 css 文件编译到 app.css 中，并在需要时手动包含其中的一些文件
【发布时间】：2017-01-05 17:30:12
【问题描述】：

我有一个 Elixir/Phoenix 应用程序，我在其中使用了 brunch 和 npm。由于所有 css 文件都被编译成 app.css 并且我不想全部编译它们，而只编译其中一些，并且包括在某些页面上未手动编译的那些，我想知道有没有办法做到这一点？

【问题讨论】：

标签： npm elixir phoenix-framework brunch

【解决方案1】：

在全新的 Phoenix 1.2 应用程序中，以下是如何设置 /css/app.css 以包含除 web/static/css/foo.css 和 web/static/css/bar.css 之外的所有文件，/css/foo.css 仅包含 web/static/css/foo.css 和 /css/bar.css 以仅包含 @987654327 @：

修改brunch-config.js的stylesheets:对象如下：

...
stylesheets: {
  joinTo: {
    "css/app.css": [/^web\/static\/css\//, "!web/static/css/foo.css", "!web/static/css/bar.css"],
    "css/foo.css": "web/static/css/foo.css",
    "css/bar.css": "web/static/css/bar.css"
  },
  order: {
    after: ["web/static/css/app.css"] // concat app.css last
  }
},
...

然后，在视图中，您可以像这样分别包含这些文件：

<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
<link rel="stylesheet" href="<%= static_path(@conn, "/css/foo.css") %>">
<link rel="stylesheet" href="<%= static_path(@conn, "/css/bar.css") %>">

【讨论】：

谢谢。如果我有一个 scss 文件，我可以将它作为一个普通的 css 文件包含，还是我需要先安装一个依赖项？
谢谢。如果我有一个 scss 文件，我可以将它作为一个普通的 css 文件包含，还是我需要先安装一个依赖项？
我不希望它们被编译成 app.css，我可以这样做吗？怎么做？
@Johshi 只需将带有前导! 的路径（如!web/static/css/foo.scss）添加到css/app.css 数组中，就像我为foo.css 和bar.css 所做的那样。跨度>
但是如果有很多呢？如何为所有人做到这一点？出于调试目的，我现在根本不希望它连接它们。