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 ファイルを自分でコンパイルする必要があります。
誰でも私を助けることができますか?ありがとう!