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 文件。仅 select 主题颜色并在 html 文件中包含 link。这是一个支持您的工具：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";

Angular2-mdl 和 webpack

Angular2-mdl and webpack

angular2-mdl

angular