Open mattdsteele opened 4 years ago
Actually, based on this blog post, @forward
is supported starting in sass 1.23.0, so it's even less clear why is failing to compile.
@mattdsteele I encountered same issue a couple weeks ago and commented under MDC repo for further investigation upstream. https://github.com/material-components/material-components-web/pull/5546#issuecomment-581640495
@abhiomkar filed an issue with sass-loader
library which I'm following here
A couple workarounds are mentioned in the above links but if all else try temporarily resolving directly (e.g.: @material/chips/_index.scss
). Chips example
Hope this helps..
Hi, what's the temporary fix?
I'm not too familiar with webpack so I'm not sure how to set webpackImporter: false
like suggested here by @abhiomakar.
I also tried using the code from _chips.scss
but I still can't get my components to display properly.
I think you can either use the absolute path, and restart ng serve. Or as mentioned here: https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/getting-started to include: "styles": [ "src/styles.scss" ], "stylePreprocessorOptions": { "includePaths": [ "node_modules/" ] } in angular.json
@dazza91 thanks, I already have those lines in my my angular.json
.
This is what I have in my stylesheet:
@use '@material/theme' with (
$primary: #6200ee,
$secondary: #faab1a,
$background: #fff,
);
// MDC Typography
@use '@material/typography/mdc-typography';
@use '@material/checkbox/mdc-checkbox.scss';
@use '@material/checkbox/_index.scss';
// Angular MDC
@use '@angular-mdc/theme/material';
The code now compiles successfully but the checkbox does not seem to be styled properly like in the example. There is no hover effect and the checkmark stays black instead of white.
I installed
npm i -D @angular-builders/custom-webpack
npm install sass-loader
and I changed my angular.json
to
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js",
"mergeStrategies": {
"externals": "replace"
}
},
I also created a extra-webpack.config.js
like this:
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'sass-loader',
options: {
webpackImporter: false,
sassOptions: {
includePaths: ['node_modules'],
},
},
},
],
},
],
},
};
but I don't think I have it set up properly. If anybody has any tips, please let me know.
Sorry I don't know what to suggest. Usually when you create a new angular project you specify the ng new my-sassy-app --style=scss. This is as far as I know to tell angular to use sass out of the box. Good luck
Is there a way to import the whole deal, not just single components, via @import maybe?
Maybe it might be something to look into for testing at least. I'm sure there's a list of all the modules we could copy and paste?? ...
Describe the bug I'm not sure this is specifically an MDC Web bug, but I'm open to suggestions or workarounds.
Loading the styles for Chips does not appear to be usable, due to
@material/chips
using a@forward
directive, which is not supported by the current Sass pulled in by the Angular toolkit.To Reproduce Steps to reproduce the behavior:
ng serve
It will produce this error:
What Angular MDC version are you using?
What OS are you using?: Windows 10
What browser(s) is this bug affecting?: n/a
Additional context
I think what's happening is that while
@material/chips/_index.scss
exists, it's using a@forward
directive to include its mixins and variables: https://github.com/material-components/material-components-web/blob/master/packages/mdc-chips/_index.scssThis was a new at-rule to me, but based on this documentation, I believe it's only available in a future version of dart-sass (1.24.0, while the Angular CLI loads 1.23.3).
I'm not sure how to resolve this. Are there any workarounds or other approaches you might recommend?