Проблема с компиляцией s css в веб-пакете - веб-пакет смешивает старый код с новым

Question

Я не могу решить проблему с компиляцией s css ...

Я начал создавать сайт в gulp, а затем изменил все на webpack. Проблема в том, что сейчас старый код смешивается с новым ... Пример:

В коде у меня есть это:

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

, но в консоли я вижу это (основной. s css):

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

И ЭТО:

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

Заполнение и цвет из старого кода. В основном. css У меня есть только версия с отступом и цветом.

Моя конфигурация веб-пакета выглядит следующим образом:

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'
          }
        }
      }
    ]
  }
};

И в сценарии. js У меня есть это:

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

У кого-нибудь есть идеи как это исправить? Спасибо!

Answer 1

Вы должны подключиться css + s css

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

Рекомендую ознакомиться с некоторыми шаблонами веб-пакетов на github