Webpack ExtractTextPlugin - avoid duplicate classes in output css

陌路散爱 提交于 2019-12-24 16:19:06

问题


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); }

回答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!




回答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.



来源:https://stackoverflow.com/questions/47760263/webpack-extracttextplugin-avoid-duplicate-classes-in-output-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!