1

我正在构建一个反应应用程序，并使用带有 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);
  }
}

主文件

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

2 回答 2

1

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

希望有帮助！

于 2017-12-12T18:30:37.797 回答
0

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

于 2017-12-11T20:38:17.397 回答