Webpack ExtractTextPlugin - 避免输出 css 中的重复类答案

【问题标题】：Webpack ExtractTextPlugin - avoid duplicate classes in output cssWebpack ExtractTextPlugin - 避免输出 css 中的重复类
【发布时间】：2018-05-25 09:49:09
【问题描述】：

我正在构建一个 react 应用程序，我使用带有 css/sass 加载器的 webpack 3 + ExtractTextPlugin 来编译我的样式并生成 main.css。我所有的 scss 变量、mixins 和部分都编译到一个 main.css 文件中，但是我的问题是我在 main.css 中得到了重复的类。

我有一个 main.scss，我在其中导入了所有变量、mixins 和 partials。我还为我的所有部分、变量等使用下划线前缀。

我不知道是什么问题！

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

我的所有类都在输出 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); }

【问题讨论】：

标签： webpack sass sass-loader extract-text-plugin

【解决方案1】：

你在使用 CSS 模块吗？如果是这样，您不需要将 .scss 导入到 main.scss 文件中，因为您已经将它们导入到 JS 文件中（否则，类将在 2 个不同的上下文中导入时重复）

希望有帮助！

【讨论】：

【解决方案2】：

好吧，实际上问题是我在 partials 和 main.scss 中都导入了部分样式，然后从 main.scss 中删除了它，现在它可以工作了。

【讨论】：