Theming "Material Design Components for the Web" in Angular 2
I am trying to use MDC for the web. To get started, I first set up the theme. Then this followed.
-
npm install -g @angular/cli
-
ng new --style scss test-project
-
cd test-project
-
npm i material-components-web --save
-
npm i
-
Open
styles.scss
and add the following$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";
This gives an error:
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.
I realize I am getting this error, as in MDC for the Web, all paths set directly (not relative). They have imports:
@import "@material/animation/mdc-animation";
For us it should be
@import "~@material/animation/mdc-animation";
Need help on how to fix this. Maybe I need to throw angular-cli and tweak its webpack config.
source to share
Without @ angular / cli
I think this is a workaround. Not really a solution for the above problem.
If you want to use an easily accessible project. I have uploaded my working solution here:
I could get it to work without angular-cli. Here's what I did.
I have sass-loader
already included in the webpack config. Just add them to options sass-loader
.
includePaths: [
path.resolve(__dirname, "node_modules"),
path.resolve(__dirname, "node_modules/@material/**/*")
]
In my main style .scss added:
$mdc-theme-primary: #002D72;
$mdc-theme-accent: #f98710;
$mdc-theme-background: #fff;
@import "~@material/theme/mdc-theme.scss";
It would be great if someone could work with @angular/cli
source to share