swanie21 / sass-css-modules-webpack

Create React App with Sass and CSS Modules

How to install Sass and CSS Modules into your Create React App

This project was bootstrapped with 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')] };

sass-css-modules-webpack's Issues

there is something wrong with 'build',

in dev,
css-modules worked well,
but error when 'npm run build'...

No CSS hot-reloading?

Running this project with the suggested implementation

If I change:

.app {
text-align: center;
}

To:

.app {
text-align: left;
}

Changes are not displayed until I refresh the browser.

What is required to see the SCSS changes updated in the browser without having to refresh?

Thanks