在Angular 2

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

我可以让它在没有角度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

进行此操作，那对每个人来说都会很棒