Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A Few Grammatical Changes #45

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

A Few Grammatical Changes #45

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ $ npm start & open http://localhost:8080

## npm modules required for CSS modules

In this project's `package.json` file you find a lot of npm modules for this demo application. Since not all of them are required for the actual CSS modules features,
we've created the following list to describe their purposes.
In this project's `package.json` file you will find a lot of npm modules for this demo application. Since not all of them are required to use CSS modules, we've created the following list to describe their purpose.

**Required modules**

Expand All @@ -23,10 +22,10 @@ The following modules are the only ones really needed to get started with CSS mo
|Module|Description|
|------|------------|
|[Webpack]|Webpack (obviously...)|
|[webpack-dev-server]|(Optional) Supports hotloading of changed files etc while developing||
|[style-loader] and [css-loader]|`style-loader` and `css-loader` process your CSS files. `css-loader` is the loader that actual makes [CSS modules] work|
|[webpack-dev-server]|(Optional) Supports hotloading of changed files, etc., while developing||
|[style-loader] and [css-loader]|`style-loader` and `css-loader` process your CSS files. `css-loader` is the loader that actually makes [CSS modules] work|

To make CSS modules work with Webpack you only have to include the modules mentioned above and add the following loader to your `webpack.config.js` file:
To make CSS modules work with Webpack you only have to include the modules mentioned above, and add the following loader to your `webpack.config.js` file:
```
. . .
{
Expand All @@ -38,26 +37,26 @@ To make CSS modules work with Webpack you only have to include the modules menti

**Optional modules**

The following modules control the *actual CSS processing*. They are *not* CSS modules specific and can be used with both "regular" CSS and CSS modules:
The following modules control the *actual CSS processing*. They are *not* CSS modules specific, and can be used with both "regular" CSS and CSS modules:

|Module|Description|
|------|------------|
|[postcss-loader](https://github.com/postcss/postcss-loader)|Allows execution of various CSS post processor in Webpack. Required for `autoprefixer-core` and `postcss-color-rebeccapurple`|
|[autoprefixer-core](https://github.com/ai/autoprefixer-core)|Add vendor-prefixes to your css code (according to the GitHub page it is deprecated and should be replaced by [autoprefixer](https://github.com/postcss/autoprefixer)|
|[postcss-color-rebeccapurple](https://github.com/postcss/postcss-color-rebeccapurple)|Another CSS post processor. Only needed to support `rebeccapurple` color in CSS|
|[extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin)|Writes the CSS code processed by Webpack into an own CSS-file and not into the generated bundle JavaScript file.|
|[postcss-loader](https://github.com/postcss/postcss-loader)|Allows execution of various CSS post processors in Webpack. Required for `autoprefixer-core` and `postcss-color-rebeccapurple`|
|[autoprefixer-core](https://github.com/ai/autoprefixer-core)|Add vendor-prefixes to your css code (according to the GitHub page, it is deprecated and should be replaced by [autoprefixer](https://github.com/postcss/autoprefixer)|
|[postcss-color-rebeccapurple](https://github.com/postcss/postcss-color-rebeccapurple)|Another CSS post processor. This is only needed to support `rebeccapurple` color in CSS|
|[extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin)|Writes the CSS code processed by Webpack into its own CSS-file, and not into the generated bundle JavaScript file.|

**Unrelated modules**

This modules are only needed for the demo application:
These modules are only needed for the demo application:

|Module|Description |
|------|------------|
|[babel]|ESx-to-ES5 compiler. Mostly needed for React code|
|[ejs]|JavaScript templating language|
|[react-to-html-webpack-plugin]|Webpack plug-in that renders React components|
|[node-libs-browser]|Node libraries for in-browser use|
|[gh-pages]|Publishes file to a `gh-pages` branches for GitHub pages|
|[gh-pages]|Publishes file to a `gh-pages` branch for GitHub pages|
|[url-loader]|Webpack file handling, e.g. for images|
|[file-loader]|Webpack file handling, e.g. for images|
|[raw-loader]|It’s used to load raw css files (as utf8) into the demo so it can be rendered into `<code>`|
Expand Down