angular - Angular 2 中的主题 'Material Design Components for Web'

Question

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

1. npm install -g @angular/cli
2. ng new --style scss test-project
3. cd 测试项目
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

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

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

Seed at https://github.com/pvamshi/MDC-web-starter

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

我已经在 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 来解决这个问题，那对每个人来说都很棒