Webpack ExtractTextPlugin - avoid duplicate classes in output css

Question

I'm building a react app and im using webpack 3 with css/sass loaders + the ExtractTextPlugin to compile my styles and generate main.css. All my scss variables, mixins and partials are compiling into one single main.css file, but my problem is that im getting duplicate classes in main.css.

I have a main.scss where I import all of my variables, mixins and partials. Im also using the underscore prefix for all of my partials, variables etc.

I cant figure out what the problem is!

webpack.config.js

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body'
});
const output = path.resolve(__dirname + '/dist/');

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: output,
    filename: 'js/index.bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.scss$/, use: ExtractTextPlugin.extract({
        use: [{
          loader: 'css-loader',
        },
        {
          loader: 'sass-loader'
        }]
      })
    }]
  },
  plugins: [
    HtmlWebpackPluginConfig,
    new ExtractTextPlugin({
      filename: 'css/main.css',
      disable: false,
      allChunks: true
    })
  ]
}

_button.scss

@import '../base/variables.scss';
@import '../base/mixins.scss';

.button {
  border: 3px solid $red;
  background-color: $white;
  color: $red;
  border-radius: 25px;
  @include size(160px, 55px);  
  text-transform: uppercase;
  transition: all 800ms $expo-ease-out;

  &:hover {
    transform: scale(1.1);
  }

  @include breakpoint(mobile) {
    @include size(150px, 50px);
  }
}

main.scss

@import 'base/variables.scss';
@import 'base/mixins.scss';
@import 'base/typography.scss';
@import 'base/global.scss';
@import 'base/ui.scss';

@import 'components/button.scss';
@import 'components/header.scss';
// etc

all of my classes are duplicated in the output css: main.css

.button {
  border: 3px solid #810409;
  background-color: #FFFCF2;
  color: #810409;
  border-radius: 25px;
  font-size: 16px;
  width: 160px;
  height: 55px;
  text-transform: uppercase;
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); }
  .button:hover {
    transform: scale(1.1); } 

......

.button {
  border: 3px solid #810409;
  background-color: #FFFCF2;
  color: #810409;
  border-radius: 25px;
  font-size: 16px;
  width: 160px;
  height: 55px;
  text-transform: uppercase;
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); }
  .button:hover {
    transform: scale(1.1); }

Lurlenelurline

Answer 1

Are you using CSS modules? If so, you don't need to import your .scss in a main.scss file as you are importing them in your JS file already (otherwise, classes would be duplicated as they are imported in 2 different contexts)

Hope that helps!

Minda

Answer 2

Okey so actually the problem was that I was importing the partial styles in both the partials and main.scss, removed it from main.scss and now it works.

Lurlenelurline