Skip to content

Latest commit

 

History

History
44 lines (29 loc) · 1.35 KB

css_modules.md

File metadata and controls

44 lines (29 loc) · 1.35 KB

CSS modules example.

Running the application

yarn install
yarn build:watch
open localhost:10001

Expected behaviour

  • A title in the center of a greenish background is seen on the page

CSS

Cascading Style Sheets are used in web browsers to define how HTML is rendered visually: the color and font of text, alignment of different sections etc.

This course will not focus on how to build maintainable CSS.

However as with JavaScript files an important part of any source code is the ability to split it into manageable chunks. This can be achieved in CSS via CSS modules.

CSS modules

CSS modules, similarly to modules in JavaScript, cannot be resolved by the web browser runtime. The modules must be resolved by the build tool.

There are various ways to include CSS modules into a build process. A very basic example is given in this example.

Explanation

rollup.config.js uses postcss to process CSS files. Most notably, it uses the postcss-import PostCSS plugin to allow import-ing one CSS file in another.

There are other methods to define and output CSS e.g. css-in-js, but the given example suffices for this course.