[英]Angular2-mdl and webpack
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. 我遵循了https://www.npmjs.com/package/angular2-mdl上提供的步骤,并确保Angular2-mdl可以正常工作,但现在我陷入了要包括MDL的scss文件的问题。
I have not extended angular-cli-build.js, and don't think I actually have to. 我还没有扩展angular-cli-build.js,也不认为我实际上必须这样做。 So, where to I set the SASS compiler options, when using webpack only?
那么,仅在使用webpack时,我在哪里设置SASS编译器选项?
So far I have tried to add this to by webpack option: 到目前为止,我尝试将其添加到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')
]
},
there are two ways to include the css from material design lite: 有两种方法可以从Material Design Lite中包含CSS:
if you want to have full control over mdl you can use the scss files. 如果要完全控制MDL,可以使用scss文件。 This requires that you have generated the project with
ng new projectname --style=sass
(angular-cli@1.0.0-beta.16). 这要求您已使用
ng new projectname --style=sass
(angular-cli@1.0.0-beta.16)生成了项目。 In the generated styles.sass
file you can use the scss sources. 在生成的
styles.sass
文件中,您可以使用scss源。 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";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.