Skip to content

Instantly share code, notes, and snippets.

@bitpshr

bitpshr/CSSModules.md Secret

Last active November 10, 2016 22:37
Show Gist options
  • Save bitpshr/e80a01e36a26e78519fe8a53a0c24a5c to your computer and use it in GitHub Desktop.
Save bitpshr/e80a01e36a26e78519fe8a53a0c24a5c to your computer and use it in GitHub Desktop.
Download ZIP
CSS module example using dojo/cli-css-typings and dojo/cli-build
Raw
CSSModules.md

  1. Generate a Dojo 2 app.

    dojo create app --name testApp

  2. Create a CSS module at testApp/src/styles/example.css (file name and location don't matter).

    .someClass {
	background: red;
}

  3. Generate typings to leverage TS intellisense. A type declaration file will be generated at testApp/src/styles/module.css.d.ts.

    dojo css typings --in testApp/src/styles/example.css --out testApp/src/styles/

  4. Import styles and do something with them. Here we import the CSS module into testApp/src/main.ts and apply the generated class to the <body> element as a demonstration, but ideally a user would import CSS modules into widgets.

    import * as css from './styles/example.css';
document.body.classList.add(css.someClass);

  5. Build the app.

    cd testApp
dojo build webpack

  6. Serve testApp/dist and visit in a browser. The <body> should have a generated CSS class name and a red background.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment