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

Question

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

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

我想不通是什么问题！

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

Answer 1

Okey 所以实际上问题是我在部分和 main.scss 中导入部分样式，将其从 main.scss 中删除，现在它可以工作了。

Answer 2

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

希望对您有所帮助！