我使用webpack配置我的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 {
}
我的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时，它会混淆来自materialize库的类的顺序 .
如果我编译scss文件并且需要css文件它可以正常工作，但是如果我在 _colors.scss 文件中更改某些内容，我将需要自己编译scss文件，因为webpack不知道要查找它 .
谁能帮我？谢谢！