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

标签 npm elixir phoenix-framework brunch

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

最佳答案

在全新的 Phoenix 1.2 应用程序中,以下是如何设置 /css/app.css 以包含除 web/static/css/foo.cssweb/static/css/bar.css, /css/foo.css 只包含 web/static/css/foo.css,和 /css/bar.css 只包含 web/static/css/bar.css:

brunch-config.jsstylesheets: 对象修改为以下内容:

...
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
  }
},
...

然后,在 View 中,您可以像这样分别包含这些文件:

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

关于npm - 不要将所有 css 文件编译成 app.css 并在需要时手动包含其中一些,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39210393/

相关文章:

upload - Elixir/Phoenix 文件上传文件夹

javascript - Node 项目在本地可以运行,但通过 NPM 安装时失败?

elixir - 编程 Phoenix : where is this 'assigns' coming from?

node.js - 如何使用完全不同的包(不仅仅是不同的包版本号)覆盖嵌套的 npm 子依赖项?

postgresql - 将 Postgres 包装成专用的 Phoenix App

json - Phoenix : render JSON from a template

elixir - Phoenix中渲染函数的区别

phoenix-framework - html 中的 js 未在 Phoenix 框架示例应用程序中执行

node.js - 具有 null、未定义、空值和默认值的 npm joi

node.js - 如何使 webpack 开发服务器在 80 端口和 0.0.0.0 上运行以使其可公开访问?