/helper-content/css_reloading.md

https://github.com/bhauman/figwheel-main · Markdown · 74 lines · 55 code · 19 blank · 0 comment · 0 complexity · 4b15bba0792b5cdae7c63988b9412097 MD5 · raw file 

    

  1. # Live CSS reloading
    2. 

  2. 

  3. <div class="lead-in">Figwheel will hot reload your CSS files as you edit them.</div>
    4. 

  4. 

  5. You need to do four things for this to work:
    6. 

  6. 

  7. * ensure that you are providing your own [HTML host page][host-page]
    8. 

  8. * include a link to your CSS in your host page HTML
    9. 

  9. * ensure your CSS is in a `public` directory on the classpath
    10. 

  10. * configure the [`:css-dirs` config option][css-dirs]
    11. 

  11. 

  12. ## Including link to CSS file
    13. 

  13. 

  14. Include a link tag to your CSS on your [HTML host page][host-page].
    15. 

  15. 

  16. ```html
    17. 

  17. <!DOCTYPE html>
    18. 

  18. <html>
    19. 

  19.   <head>
    20. 

  20.     <meta charset="UTF-8">
    21. 

  21.     <!-- we are including the CSS here -->
    22. 

  22.     <link href="css/style.css" rel="stylesheet" type="text/css">
    23. 

  23.   </head>
    24. 

  24.   <body>
    25. 

  25.     <div id="app">
    26. 

  26.     </div>
    27. 

  27.     <script src="cljs-out/dev-main.js" type="text/javascript"></script>
    28. 

  28.   </body>
    29. 

  29. </html>
    30. 

  30. ```
    31. 

  31. 

  32. ## Ensuring your CSS file can be served
    33. 

  33. 

  34. The above example will work if you place your CSS file in a
    35. 

  35. `public/css` directory on the classpath. Since the `resources`
    36. 

  36. directory is normally on the classpath by convention we can place our
    37. 

  37. CSS files `resources/public/css`.
    38. 

  38. 

  39. ## Tell Figwheel to watch and reload CSS
    40. 

  40. 

  41. You will use the [`:css-dirs` config key][css-dirs] to tell Figwheel
    42. 

  42. to which directories to watch for CSS file changes.
    43. 

  43. 

  44. You can do this one of two ways: in the **build file** or in the
    45. 

  45. `figwheel-main.edn` file.
    46. 

  46. 

  47. As and example let's assuming a `dev.cljs.edn` build file. You can add
    48. 

  48. `:css-dirs` config to the metadata in the build file like so:
    49. 

  49. 

  50. ```clojure
    51. 

  51. ^{:css-dirs ["resources/public/css"]}
    52. 

  52. {:main example.core}
    53. 

  53. ```
    54. 

  54. 

  55. Or you can set it for all builds and compiles in the `figwheel-main.edn`:
    56. 

  56. 

  57. ```clojure
    58. 

  58. {:css-dirs ["resources/public/css"]
    59. 

  59.  ;; rest of the config
    60. 

  60.  }
    61. 

  61. ```
    62. 

  62. 

  63. Then you restart your build:
    64. 

  64. 

  65. ```shell
    66. 

  66. clojure -m figwheel.main -b dev -r
    67. 

  67. ```
    68. 

  68. 

  69. Now you should be able to edit and save the
    70. 

  70. `resources/public/css/style.css` file and see the changes rendered
    71. 

  71. live in your application.
    72. 

  72. 

  73. [css-dirs]: //figwheel.org/config-options#css-dirs
    74. 

  74. [host-page]: //figwheel.org/docs/your_own_page
    75.