1

我使用 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 不知道要查找它。

谁能帮我？谢谢！

4

0 回答 0