在 Angular 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-theme-primary: #002D72;
   $mdc-theme-accent: #f98710;
   $mdc-theme-background: #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 for Web 中直接设置了所有路径（不是相对路径），因此我收到此错误。 他们有这样的进口：

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

为了我们工作，应该是

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

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

Answer 1

没有@angular/cli

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

如果您希望使用现成的项目。我在这里上传了我的工作解决方案：

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

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

我已经将sass-loader 包含在 webpack 配置中。刚刚在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 一起工作，这对每个人来说都很棒