Angular2-MDL和Webpack

Question

我遵循了https://www.npmjs.com/package/angular2-mdl上提供的步骤，并确保Angular2-mdl可以正常工作，但现在我陷入了要包括MDL的scss文件的问题。

我还没有扩展angular-cli-build.js，也不认为我实际上必须这样做。 那么，仅在使用webpack时，我在哪里设置SASS编译器选项？

到目前为止，我尝试将其添加到webpack选项中：

    module: {
    loaders: [
        {
          test: /\.ts$/,
          loader: 'awesome-typescript-loader',
          exclude: [/\.(spec|e2e)\.ts$/]
        },      
        { loader: 'raw', 
          test: /\.(css|html)$/
        },
        {
          test: /\.scss$/,
          loader: 'raw-loader!sass-loader',
        },              
        { 
          test: /\.ts$/,                
          loader: 'ts', 
          exclude: /node_modules/
        }
    ]
},
sassLoader: {
    includePaths: [
        path.resolve(__dirname, '/node_modules/angular2-mdl/src/scss-mdl')
    ]
},

Answer 1

有两种方法可以从Material Design Lite中包含CSS：

• 您可以使用预先生成的CSS文件。 只需选择主题颜色，然后将链接包含在html文件中即可。 这是一个支持您的工具： http : //mseemann.io/angular2-mdl/theme

• 如果要完全控制MDL，可以使用scss文件。 这要求您已使用ng new projectname --style=sass （angular-cli@1.0.0-beta.16）生成了项目。 在生成的styles.sass文件中，您可以使用scss源。 例如：

   @import "~angular2-mdl/src/scss-mdl/color-definitions"; $color-primary: $palette-blue-500; $color-primary-dark: $palette-blue-700; $color-accent: $palette-amber-A200; $color-primary-contrast: $color-dark-contrast; $color-accent-contrast: $color-dark-contrast; @import "~angular2-mdl/src/scss-mdl/material-design-lite";