├── .babelrc
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
├── app.scss
├── colors.scss
└── index.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 | /node_modules
3 | npm-debug.log
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # css-modules-react
2 |
3 | Learning how to use CSS Modules with React
4 |
5 | ### Getting started
6 |
7 | 1. `npm install`
8 | 2. `npm start`
9 |
10 | ...and magically a default project with CSS Modules has been setup! Now all you have to do is follow [the tutorial](https://css-tricks.com/css-modules-part-3-react/) to get React and CSS Modules and Webpack working with one another.
11 |
12 |
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document name
6 |
7 |
8 |
9 | CSS Modules demo
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-tricks-modules",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "babel-core": "^6.7.4",
14 | "babel-loader": "^6.2.4",
15 | "babel-preset-es2015": "^6.6.0",
16 | "browser-sync": "^2.11.2",
17 | "css-loader": "^0.23.1",
18 | "extract-text-webpack-plugin": "^1.0.1",
19 | "webpack": "^1.12.14"
20 | },
21 | "dependencies": ""
22 | }
23 |
--------------------------------------------------------------------------------
/src/app.scss:
--------------------------------------------------------------------------------
1 | .thing {
2 | composes: red from './colors.scss';
3 | font-size: 20px;
4 | padding: 20px;
5 | }
--------------------------------------------------------------------------------
/src/colors.scss:
--------------------------------------------------------------------------------
1 | .red {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robinrendle/css-modules-react/9bd5274bfcaac26dc23dd8487d041779af443245/src/index.js
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
2 |
3 |
4 | module.exports = {
5 | entry: {
6 | 'main': './src',
7 | },
8 | output: {
9 | path: 'build',
10 | filename: 'bundle.js',
11 | },
12 | module: {
13 | loaders: [
14 | {
15 | test: /\.js$/,
16 | loader: 'babel',
17 | include: __dirname + '/src',
18 | },
19 | {
20 | test: /\.css$/,
21 | loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
22 | include: __dirname + '/src'
23 | }
24 | ],
25 | },
26 | plugins: [
27 | new ExtractTextPlugin("styles.css"),
28 | ]
29 | };
30 |
--------------------------------------------------------------------------------