Загрузчики Angular2 webpack raw! Sass с проблемой UglifyJS

Я использую веб-пакет для настройки пакетов приложений angular2.

Я использую sass для оформления страниц.

Цепочка загрузчиков для разрешения sass для стиля компонента:raw!sass

Когда я использую его для разработки без минификации, все работает нормально.

Когда я использую плагин UglifyJS, он разрушает дизайн, и я вижу, что он меняет позиции класса в импортированном классе CSS.

Мой компонент:

@Component({
  selector: 'navigation-bar',
  template: require('./navigation.component.html'),
  styles: [require('./navigation.component.scss')],
  directives: [ROUTER_DIRECTIVES]
})
export class NavigationComponent {
}

Мой конфиг для стилей:

  {
    test: /\.scss$/,
    exclude: PathHelper.getPathFromRoot('src', 'app', 'modules'),
    loader: ExtractTextPlugin.extract('style', 'css!resolve-url!sass?sourceMap')
  },
  {
    test: /\.scss$/,
    include: PathHelper.getPathFromRoot('src', 'app', 'modules'),
    loader: 'raw!sass'
  },
  {
    test: /\.css$/,
    exclude: PathHelper.getPathFromRoot('src', 'app', 'modules'),
    loader: ExtractTextPlugin.extract('style', 'css!resolve-url!css?sourceMap')
  },
  {
    test: /\.css$/,
    include: PathHelper.getPathFromRoot('src', 'app', 'modules'),
    loader: 'raw!resolve-url'
  }

Файл scss:

@import "../../../../commonStyles/_colors";
@import '../../../../../../node_modules/materialize-css/dist/css/materialize.min';

nav{
  @extend .blue;

  .brand-logo{
    @extend .left;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .navigation-options {
    @extend .right;

    .dropdown-button{
      padding: 0;

      i{
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }

    .dropdown-content{
      width: auto;

      li{
        a{
          @extend .blue-text;

          i.material-icons{
            display: inline;
            vertical-align: middle;
            margin-right: 1rem;
          }

          .text{
            vertical-align: middle;
          }
        }
      }

    }
  }
}

Когда я использую UglifyJS, он портится с порядком классов, которые поступают из библиотеки материализации.

Если я скомпилирую файл scss и требую файл css, он будет работать нормально, но если я что-то изменю в _colors.scss файл Мне нужно будет скомпилировать файл scss самостоятельно, потому что веб-пакет не знает, как его искать.

Может кто-нибудь мне помочь? Спасибо!

0 ответов

Другие вопросы по тегам