https://github.com/swanie21/sass-css-modules-webpack
Create React App with Sass and CSS Modules
https://github.com/swanie21/sass-css-modules-webpack
css-modules react sass
Last synced: 10 months ago
JSON representation
Create React App with Sass and CSS Modules
- Host: GitHub
- URL: https://github.com/swanie21/sass-css-modules-webpack
- Owner: swanie21
- Created: 2017-07-31T00:59:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-03T21:05:57.000Z (almost 8 years ago)
- Last Synced: 2025-04-12T02:24:32.312Z (10 months ago)
- Topics: css-modules, react, sass
- Language: JavaScript
- Homepage: http://kirstenswanson.io/sass-css-modules-webpack/
- Size: 561 KB
- Stars: 79
- Watchers: 6
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to install Sass and CSS Modules into your Create React App
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
`npm run eject`
`yarn eject`
`npm i sass-loader node-sass --save`
`yarn add sass-loader node-sass`
Modify the `webpack.config.dev.js` file
```
const ExtractTextPlugin = require('extract-text-webpack-plugin');
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
/\.scss$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader'
]
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 2,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'sass-loader'
]
})
},
plugins: [
new ExtractTextPlugin({ filename: 'styles.css', allChunks: true, disable: process.env.NODE_ENV !== 'production' }),
]
```
* In order for hot reloading you will need to disable the Extract Text Plugin in the dev environment. This can be accomplished by adding `disable: process.env.NODE_ENV !== 'production'` in the ExtractTextPlugin options.
Create `postcss.config.js` file
```
module.exports = { plugins: [require('autoprefixer')] };
```