Загрузчики 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 самостоятельно, потому что веб-пакет не знает, как его искать.
Может кто-нибудь мне помочь? Спасибо!