Angular2-MDL和Webpack [英] Angular2-mdl and webpack

问题描述

我已遵循 https://www.npmjs.com/package/angular2提供的步骤-mdl 并确保Angular2-mdl正常运行，但是现在我陷入了要包括MDL的scss文件的地步.

I have followed to steps provided at https://www.npmjs.com/package/angular2-mdl and got Angular2-mdl working flawlessly, but now I'm stuck at the point where I want to include MDL's scss files.

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

I have not extended angular-cli-build.js, and don't think I actually have to. So, where to I set the SASS compiler options, when using webpack only?

到目前为止，我已经尝试通过webpack选项将此添加到其中:

So far I have tried to add this to by webpack option:

    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')
    ]
},

推荐答案

有两种方法可以包含Material Design Lite中的CSS:

there are two ways to include the css from material design lite:

• 您可以使用预先生成的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源.例如:

• you can use the pre generated css files. just select the theme colors and include the link in your html file. here is a tool that supports you: http://mseemann.io/angular2-mdl/theme

• if you want to have full control over mdl you can use the scss files. This requires that you have generated the project with ng new projectname --style=sass (angular-cli@1.0.0-beta.16). In the generated styles.sass file you can use the scss sources. For example:

@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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！