1

angular2 アプリケーション バンドルを構成するために webpack を使用します。

ページのデザインには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 {
}

スタイルの私の webpack 設定:

  {
    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、webpack がそれを探すことを知らないため、scss ファイルを自分でコンパイルする必要があります。

誰でも私を助けることができますか?ありがとう!

4

0 に答える 0