webpack中编译scss的问题-webpack将旧代码与新代码混合在一起

Question

我无法解决编译scss的问题...

我已经开始用gulp建立网站，然后将所有内容都更改为webpack。问题在于，现在旧代码与新代码混在一起了。例如：

在代码中，我有这个：

&__logo {
  &-icon {
    width: 150px;
    img {
      width: 100%;
    }
  }
}

但是在控制台中，我可以看到此（main.scss）：

header .header__logo-icon {
    width: 150px;
}

和此：

header .header__logo-icon (_header.scss) {
    padding: 1rem;
    color: white;
}

填充和颜色来自旧代码。在main.css中，我只有带填充和颜色的版本。

我的webpack配置看起来像这样：

var path = require('path');

module.exports = {
  entry: './js/script.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/build',
    filename: 'bundle.js'
  },
  watch: true,
  mode: 'development',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['es2015'] }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|gif|png|csv)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            publicPath: 'img',
            outputPath: 'img'
          }
        }
      }
    ]
  }
};

在script.js中，我有这个：

require('../scss/main.scss');

有人知道如何解决吗？谢谢！

Answer 1

您应该连接css + scss

{
  test: /\.(css|sass|scss)$/,
  use: [
    'style-loader'
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        sourceMap: true,
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
  ],
},

我建议在github上熟悉一些webpack-boilerplate