我使用 webpack 来配置我的 angular2 应用程序包。
我使用 sass 来设计页面。
为组件样式解析 sass 的 loader 链是: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
文件中的某些内容,我将需要自己编译 scss 文件,因为 webpack 不知道要查找它。
谁能帮我?谢谢!