Using css-modules with webpack and style-loader
git clone git@github.com:SmithPeder/css-modules.git
npm install
npm start
To get CSS Modules to work the style-loader has to be added to your development dependencies.
// package.json
...
"devDependencies": {
...
style-loader: "^0.12.3",
...
}
...
Then a loader needs to be added for handling .css
files
// webpack.config.js
...
{
test: /\.css$/,
loader:
'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
...
The rest of the configurations in package.json
and webpack.config.js
are needed to get the
boilerplate project to run, but are technically not needed for the CSS Modules.
After the dependencies and loader configuration is complete, you can import a style sheet in your .js
file.
import styles from './someFile.css';
Then use the style sheet the normal way by giving a element a className.
<div className={styles.root}>
The power of the dependency is shown in the result section below. The CSS you write in that specific file is scoped and cannot be used by elements that don't import that specific file.
The loader adds a hash suffix after every classname as seen when inspection the webpage with chrome dev tool.
<div>
<div class="Header__root___1bSWx">
<h1 class="Header__text___2F6ja"> Header </h1>
</div>
<div class="Main__root___2pBCi">
<h1 class="Main__text___380AU">Main</h1>
</div>
<div class="Footer__root___2RaCj">
<h1 class="Footer__text___2vHCC">Footer</h1>
</div>
</div>
The result is six components that share classnames but have different style
The dependency brings a lot more then just scoping. You can also compose selectors.
From same file:
.className {
color: green;
background: red;
}
.otherClassName {
composes: className;
color: yellow;
}
From another file:
.otherClassName {
composes: className from "./style.css";
}
Using compose selectors becomes critical if you want to reuse classes, and avoid duplicate code. Composing and more is described in more detail at the dependency repo css-modules.