You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+32-10Lines changed: 32 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -1,40 +1,62 @@
1
-
Example project demonstrating the use of [React Flag Icon Css](https://github.com/matteocng/react-flag-icon-css-example-multi/tree/webpack-1) with [React Css Modules](//github.com/gajus/react-css-modules) or standard Css, and custom flags. Powered by [Webpack 2](https://github.com/webpack/webpack) (there is also a [Webpack 1 version](https://github.com/webpack/webpack)).
1
+
Example project demonstrating the use of [React Flag Icon Css](https://github.com/matteocng/react-flag-icon-css) with [React Css Modules](//github.com/gajus/react-css-modules) or standard Css, and custom flags.
2
2
3
-
## Installation
3
+
Powered by [webpack 2](https://github.com/webpack/webpack) (there is also a [webpack 1 version](https://github.com/matteocng/react-flag-icon-css-example-multi/tree/webpack-1)).
4
4
5
-
It is recommended to use [Yarn](https://yarnpkg.com/) instead of npm for managing packages.
Install the required modules with [Yarn](https://yarnpkg.com/):
15
15
16
16
```bash
17
17
$ yarn
18
18
```
19
19
20
-
Run the [Webpack development server](//github.com/webpack/webpack-dev-server) and apply the configuration for [React Css Modules](//github.com/gajus/react-css-modules):
20
+
or with npm:
21
+
22
+
```bash
23
+
$ npm install
24
+
```
25
+
26
+
#### Option A) React Css Modules
27
+
28
+
Run the [webpack development server](//github.com/webpack/webpack-dev-server) and apply the configuration for [React Css Modules](//github.com/gajus/react-css-modules):
21
29
22
30
```bash
23
31
$ yarn start
24
32
```
25
33
26
-
... or use standard Css:
34
+
or with npm:
35
+
36
+
```bash
37
+
$ npm run start
38
+
```
39
+
40
+
#### Option B) Standard, global Css
41
+
42
+
Run the [webpack development server](//github.com/webpack/webpack-dev-server) and apply the configuration for standard Css:
27
43
28
44
29
45
```bash
30
46
$ yarn start:classes
31
47
```
32
48
49
+
or with npm:
50
+
51
+
```bash
52
+
$ npm run start:classes
53
+
```
54
+
33
55
Open a browser and go here: [http://localhost:8080](http://localhost:8080).
34
56
35
57
## Notes
36
58
37
-
This example project uses the <code>USE_CSS_MODULES</code> environment variable (set by the <code>package.json</code> scripts) to allow for an easy "switch" between a configuration with or without [React Css Modules](//github.com/gajus/react-css-modules). This results in more complex code than need be.
59
+
This example app uses the <code>USE_CSS_MODULES</code> environment variable (set by <code>[package.json](package.json)</code> scripts) to allow for an easy "switch" between a configuration with or without [React Css Modules](//github.com/gajus/react-css-modules) (see: [webpack.config.js](webpack/webpack.config.js)). This results in more complex code than need be.
38
60
39
61
In a real project you would probably choose to either go with [React Css Modules](//github.com/gajus/react-css-modules) or standard Css, removing the <code>USE_CSS_MODULES</code> switch and <code>getStylePropName</code>, replacing <code>[options.stylePropName]</code> in the React components with either <code>className</code> (standard Css) or <code>styleName</code> (modules).
40
62
@@ -45,7 +67,7 @@ This example app uses `sass` (`.scss`) styles, but `sass` is not required to use
45
67
- remove *`sass-loader`* from [webpack.config.js](webpack/webpack.config.js).
46
68
-`npm install` or `yarn add` the `PostCSS` plugins that you need.
47
69
-`import()` them into [webpack.config.js](webpack/webpack.config.js)
48
-
- add them to the `postcss` section after `autoprefixer`.
70
+
- add them to the `postcss-loader` section after `autoprefixer`.
0 commit comments