我已按照以下位置提供的步骤进行操作https://www.npmjs.com/package/angular2-mdl 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')
]
},
有两种方法可以包含 Material Design lite 中的 CSS:
- 您可以使用预先生成的 css 文件。只需选择主题颜色并将链接包含在 html 文件中即可。这是一个为您提供支持的工具:http://mseemann.io/angular2-mdl/theme http://mseemann.io/angular2-mdl/theme
-
如果你想完全控制 mdl,你可以使用 scss 文件。这要求您已使用以下命令生成项目ng new projectname --style=sass
([电子邮件受保护] /cdn-cgi/l/email-protection)。在生成的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";
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)