-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot @import scss #351
Comments
You need to make sure you include the path to the material modules in your Give that a shot and let us know if it starts working. If not, then providing a copy of your webpack config would probably help tracking things down. |
Thank you, @Garbee! Yes, setting the For the record, here is what { loader: 'sass-loader',
options: {
includePaths: glob.sync('node_modules').map((d) => path.join(__dirname, d))
}
} I guess I could be more specific, adding just the |
Here is an improved config: { loader: 'sass-loader',
options: {
includePaths: ['node_modules', 'node_modules/@material/*']
.map((d) => path.join(__dirname, d))
.map((g) => glob.sync(g))
.reduce((a, c) => a.concat(c), [])
}
} With it one can just |
@orlin closing this issue as it looks like we've addressed the root problem. While the approach you outlined makes sense, the reason we don't take it is because it won't work when we publish the packages as individual modules unless consumers also follow this paradigm, which is not something we want to enforce onto them. |
I did this and load the file but throw an syntax error:
any idea? |
This sass-loader configuration will work even if your dependency on the components is transitive. It adds all const path = require('path');
const glob = require('glob');
{ loader: 'sass-loader',
options: {
sourceMap: true,
// mdc-web doesn't use sass-loader's normal syntax for imports
// across modules, so we add all module directories containing
// mdc-web components to the Sass include path
// https://github.com/material-components/material-components-web/issues/351
includePaths: glob.sync(
path.join(__dirname, '**/node_modules/@material')
).map((dir) => path.dirname(dir)),
},
}, |
As mentioned in #981 this unfortunately is no help to (It's kind of impressive to see firsthand how uncoordinated the various development teams at Google are with each other.) The crux of the problem seems to be twofold: first of all, IMHO both of these problems ( Here are relevant existing issues: |
For those who uses Grunt here're some tips. There're a couple of grunt plugins for SASS: grunt-contrib-sass and grunt-sass. The former uses Ruby-based SASS compiler the latter C-base LibSass (node-sass is a wrapper about libsass).
BUT Ruby-based sass failed to compile material's SCSS-es in my case. So I choose libsas (grunt-sass) which works fine. |
What is
|
@wzup |
Thanks. ['node_modules', 'node_modules/@material/*'] .map((d) => path.join(__dirname, d)) |
How to use your config in webpack ? My config:
|
How do I implement this with |
Why aren't SCSS files just referenced by relative path? That would just solve a lot of problems and moves the responsibility of how to import the SCSS files back to where it should be imo; to the project itself and not to the projects using it. My 2 cents. |
My temporary solution: {
...
+ "postinstall": "grep -rl node_modules/@material/ -e '@import \"@material' | xargs sed -i \"\" 's/@material/~@material/g'"
} |
Because with Lerna to do a monorepo setup and split into subpackages, once the packages are split the relative paths would break. Hence, importing by the package name and not path structure. |
Not sure why this was closed, as I am still unable to use MDC web with Angular CLI. |
Would it be possible to use @import "~@material/textfield/mdc-text-field"; |
I agree with @VeegaP, getting sass compilation to work with webpack (and others, apparently) in a consistent way is still very much not obvious or turn-key. |
@thasmo your solution was well for me, but it's apper that sass is not be able to charge the animations. That is my current code:
Is any of you having that the samme issue? |
I really want to use your library, especially with Sass, however I can’t
@include
the.scss
styles with my current configuration. That is using Webpack 2 andsass-loader
. Here is an example project. Here is a comment describing the issue - basically I can’t import the.scss
(of button in this case) neither with relative paths nor with the~
alias tonode_modules
thatnode-sass
/sass-loader
supports. The problem in this case is@import "@material/animation/variables”;
. I expect there would be many other similar imports in the library… Do you have / know of a working Webpack 2 example?I thought Eyeglass would help, but I can’t set that up with Webpack 2. Here is an eyeglass issue and my comment on it that has a broken version of my config trying to tell
sass-loader
to useeyeglass
for importing.So I'm trying this with
material-components-web@0.4.0
and more specifically@material/button@0.2.1
importing from its dependency@material/animation@0.1.3
. It's also worth noting that I'm usingyarn
which keeps a flat directory structure of my dependencies. I wonder if you assume a regularnpm install
and thus hierarchical dependencies?Here is the example error:
Either of these two would cause it, and
mdc-button.scss
is found in both cases:@import '../node_modules/@material/button/mdc-button.scss’;
// valid relative path@import '~@material/button/mdc-button.scss’;
// ~ = node_modulesSo I'm not really sure if this is about configuration help, documentation example, bug report, or a feature request...
The text was updated successfully, but these errors were encountered: