class undefined

[linjiang82]

Hi,
I followed the instructions, but still showing class is undefined in chrome inspect tools.
the code in style.css
.list { background-color: yellow; }
The webpack config file
module: { rules: [{ test: /\.elm$/, use: [{ loader: 'elm-css-modules-loader', }, { loader: 'elm-webpack-loader', } ], }, { test: /\.css$/, use: ['style-loader', 'css-loader?modules=true'], }, ], },

The Main.elm file
`import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
import CssModules exposing (css)

styles =
css "../style.css" -- relative to main Elm source directory
{ list = "list" -- string value should match CSS class name
,another = "another"
}
main =
Browser.element {init = init, update = update, view = view, subscriptions = subscriptions}

-- MODEL

type alias ToDo =
{description: String
,completed: Bool
,editing: Bool
,id: Int}

type alias Model = Maybe (List ToDo)
init : () -> (Model, Cmd msg)
init _ =
(Just [{
description="hahaha"
,completed= False
,editing=False
,id=1},
{
description="xixixi"
,completed= False
,editing=False
,id=2}]
,Cmd.none)

-- UPDATE

type Msg = Increment | Decrement | Reset

update : msg->Model->(Model, Cmd msg)
update msg model=
(model,Cmd.none)
-- VIEW

view : Model -> Html msg
view todolist =

case todolist of
  Just a ->
    --below cannot be written as ui[][List.map xxxx], has to use <|.
    Debug.log (Debug.toString (styles.class .list))
    ul[styles.class .list] <| List.map (\x -> li[][text x.description]) a
   
  Nothing ->
    div[styles.class .list][text "nothing"]

subscriptions : Model -> Sub msg
subscriptions model =
Sub.none`

Seems everything is right, have no idea why the class is undefined.
Please help, Thanks.

[linjiang82]

solved, seems like it is the browser cache issue, after clear the cache and reload, styling is working.