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

Posted 2023-03-06

【中文标题】Webpack ExtractTextPlugin - 避免输出 css 中的重复类

【英文标题】：Webpack ExtractTextPlugin - avoid duplicate classes in output 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);
  

ma​​in.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 中重复： ma​​in.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】：

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

希望有帮助！

【参考方案2】：

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