角度2中的“Web材料设计组件”主题化

Question

我正在尝试将MDC用于Web。首先，我首先确定了这个主题。跟着这个。

1. npm install -g @angular/cli
2. ng new --style scss test-project
3. cd test-project
4. npm i material-components-web --save
5. npm i
6. 打开styles.scss并添加以下内容 $mdc-主题-主：#002D72；$mdc-主题-重音：#f 98710；$mdc-主题-背景：#fff；@import "../node_modules/material-components-web/material-components-web"；//@import "~material-components-web/material-components-web"；

这会产生错误：

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module build failed: 
@import "@material/animation/mdc-animation";
^
      File to import not found or unreadable: @material/animation/mdc-animation.

我知道我得到了这个错误，就像MDC中的Web一样，所有的路径都是直接设置的(而不是相对的)。他们有这样的进口品：

@import "@material/animation/mdc-animation";

对我们来说，这应该是

@import "~@material/animation/mdc-animation";

需要帮助如何解决这个问题。可能是我需要弹出角-cli并配置它的webpack配置。

Answer 1

无角/cli

我认为这是一种解决办法。不完全解决上述问题。

如果您希望使用现成的项目。我把我的解决方案上传到这里：

https://github.com/pvamshi/MDC-web-starter种子

我可以让它在没有棱角的情况下工作。这就是我所做的。

我已经在webpack配置中包含了sass-loader。只是在sass-loader选项中添加了这些选项。

includePaths: [
     path.resolve(__dirname, "node_modules"),
     path.resolve(__dirname, "node_modules/@material/**/*")
]

在我的主style.scss中添加了以下内容：

$mdc-theme-primary: #002D72;
$mdc-theme-accent: #f98710;
$mdc-theme-background: #fff;

@import "~@material/theme/mdc-theme.scss";

如果有人能和@angular/cli一起工作，那对每个人来说都是很好的。