npm 包 elm-css-brunch 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 elm-css-brunch

elm-css-brunch 是一个结合了 Elm 和 CSS 的构建工具，可以让你在 Elm 中使用 CSS，并且将 CSS 编译为 CSS 文件。

安装 elm-css-brunch

使用 npm 安装 elm-css-brunch：

npm install elm-css-brunch --save-dev

配置 brunch-config.js

在 brunch-config.js 中增加配置：

exports.plugins = {
  elmCss: {
    includeFiles: [/(elm\.json$|\.elm$)/],
    mainElmModule: 'Main'
  }
};

includeFiles: 配置 Elm 和 CSS 文件的正则表达式模式；
mainElmModule: 配置主 Elm 模块的名称。

编写 CSS

在 Elm 模块中使用 CSS：

-- -------------------- ---- -------
------ ---- -------- ----

------ --- -------- ----

---- ----- ----- -
    --

---- ---
    - ----

---- - ----- -- ---- ---
---- - -
    --- --
        - -- -- - ---- ------- ------- -
        -
        -- -------
            - --------------- ---- - - ----
            - ----- ---- --- --- ----
            - ------- --- --- --- ---
            -

构建

构建你的应用：

brunch build

这样会生成一个 public 文件夹，其中会包含 index.html 和 style.css，index.html 引入了 style.css。

总结

通过本教程，你学习到如何使用 elm-css-brunch 构建一个基本的 Elm 应用，并且学习到如何使用 CSS。现在，你可以享受 Elm 和 CSS 的结合带来的便利性和生产力提升啦！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005571881e8991b448d4045