Neutral Point Measurement


    1.4.1 • Public • Published


    Generate Fable bindings for your CSS modules classes

    Allowing you to leverage CSS modules in your Fable projects, in a safe way.

    module Components.QRCode
    open Fable.Core
    open Feliz
    // Import the CSS module
    let private classes : CssModules.Components.QRCode = import "default" "./QRCode.module.scss"
    let QRCode () =
        Html.div [
            prop.className classes.qrCode // Here you get completion of the defined CSS classes
            prop.children [
                // ..


    fable-css-module can be used with any bundler (Vite, Webpack, etc.) that supports CSS modules and any framework (React, Vue, etc.).

    This tools supports:

    • CSS modules identified by *.module.scss
    • SASS/SCSS modules identified by *.module.sass or *.module.scss


    Generate bindings for all the CSS modules in <source> folder to <outFile> file
      source  Folder where the CSS modules are located       [string] [default: "."]
          --version   Show version number                                  [boolean]
          --outFile   Output file where the binding will be written
                                                 [string] [default: "CssModules.fs"]
          --internal  Mark the generated module as internal[boolean] [default: true]
      -h, --help      Show help                                            [boolean]


    └─── Components
        │    QRCode.fs
        │    QRCode.module.scss
        └─── User

    If you invoke npx fcm in the src folder, a file src/CssModules.fs will be generated with the following content:

    //        This code was generated by fable-css-modules.
    //        Changes to this file will be lost when the code is regenerated.
    module internal CssModules
    open Fable.Core
    module Components =
        type QRCode =
            /// <summary>
            /// Binding for <c>qr-code</c> class
            /// </summary>
            abstract qrCode : string
        module User =
            type History =
                /// <summary>
                /// Binding for <c>history-container</c> class
                /// </summary>
                abstract history-container : string

    You should now add <Compile Include="CssModules.fs" /> to your fsproj file.

    You can now use the CssModules module in your Fable code.


    module Components.QRCode
    open Fable.Core
    open Feliz
    let private classes : CssModules.Components.QRCode = import "default" "./QRCode.module.scss"
    let QRCode () =
        Html.div [
            prop.className classes.qrCode
            prop.children [
                // ..

    Best practices

    You should avoid committing the generated files to your repository. This will force you to run fable-css-modules every time you want to build your project.

    This help make sure that your CSS modules bindings is up to date with the actual CSS modules.

    Watch mode

    Watch mode is not yet supported out of this box by fable-css-modules.

    But you can easily add using nodemon.

    npx nodemon -e module.scss --exec "fcm"

    This command will automatically run fcm every time a change to a .module.scss file is detected.

    IDE tips

    It can happen that IDEs takes a moment to reflect the changes in the generated file.

    Here are a few tips to help force them to update their references.


    Navigating to the CssModules.fs file seems to make it refresh the file.

    You can navigate to it by Ctrl+Click on the reference.

    If this is not enough, you can try to add a space to the file and saving it manually.

    Remember, CssModules.fs should not be commited so adding non meaningful spaces don't really matter


    You can click to File > Reload All from Disk or press Ctrl+Alt+Y


    npm i fable-css-modules

    DownloadsWeekly Downloads






    Unpacked Size

    56.8 kB

    Total Files


    Last publish


    • mangelmaxime