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

Question

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

Answer 1

在全新的 Phoenix 1.2 应用程序中，以下是如何设置 /css/app.css 以包含除 web/static/css/foo.css 和 web/static/css/bar.css 之外的所有文件，/css/foo.css 仅包含 [=13] =], /css/bar.css 只包含 web/static/css/bar.css:

将 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") %>">

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

Don't compile all css file into app.css and include some of them manually when needed

npm

elixir

phoenix-framework

brunch