search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.14k forks source link

[Webpack] Invalid CSS after "@include mixins" #5502

Closed DimaChaichan closed 4 years ago

DimaChaichan commented 4 years ago

Bug report

Hello, I try to pack mdc with Webpack and Typscript.

In Version 4.0.0 I get this error: 

ERROR in [at-loader] ./node_modules/@material/auto-init/index.d.ts:38:16 
    TS2528: A module cannot have multiple default exports.

This is fixed by Version: "^5.0.0-canary.faa9af310.0" But now I have the error:

ERROR in ./src/frontend/sass/main.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
        on line 24 of node_modules/@material/button/mdc-button.scss

Steps to reproduce

1 Create a Example Project like this. https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md

  1. update mdc: npm i material-components-web@5.0.0-canary.faa9af310.0
  2. run npm: npm start

Your Environment:

Software Version(s)
MDC Web 5.0.0-canary.faa9af310.0
Browser chrome
Operating System Debian 10

Possible solution

The only way to fix both problems, go to version 2.3.1.

asyncLiz commented 4 years ago

This looks like a duplicate of #5158. A fix has been made, but I don't believe it's released yet.

asyncLiz commented 4 years ago

Edit: Ah never mind, I see your actual problem is with sass!

cintaccs commented 4 years ago

I have the same problem (with the canary releases over npm and using webpack to generate the updated css) - can't find any examples of how to include the changed / new mixins? it started 2-3 weeks ago. "5.0.0-canary.0d42ee650.0" seems to work - but no later versions.

DimaChaichan commented 4 years ago

I tested now the NPM releases. The Problem is in release: 5.0.0-canary.faa9af310.0 Release 5.0.0-canary.a4db5fbad.0 works. Looks like this commit make the problem: https://github.com/material-components/material-components-web/commit/faa9af310d1a18ec2c183830c84eb14d0492feab

bonniezhou commented 4 years ago

Hi, MDC Web is not officially supported on Canary. We recommend using the @latest release.

cintaccs commented 4 years ago

... from my part it was not a support request - as I don't expect you to "support". However the feedback that is delivered here could potentially help improve the library and help the community too... @latest is currently 3 months behind (and projects using the mdc libraries are often not able to wait for 3 month for updates and improvements). Using canary at least give some interim fixes as well as avoid having major breaking changes hit you. As @canary releases are available on npm I think it is not unreasonable that some (including myself) have used "the latest" build before asking further questions or requesting new features. But in any case thanks for the feedback.

DimaChaichan commented 4 years ago

Hi, MDC Web is not officially supported on Canary. We recommend using the @latest release.

Hi bonniezhou, I try to use the @lastest version. But I have this problem: 

ERROR in [at-loader] ./node_modules/@material/auto-init/index.d.ts:38:16 
    TS2528: A module cannot have multiple default exports.

This is fixed in a Canary version. In the Moment I must use the mini.css file. And this make a lot of problems and I can't use the "power" of SCSS. I not really understand why the canary visions are on NPM, if this Versions are not ready to use. I will wait for the new Version, thanks for your feedback.

asyncLiz commented 4 years ago

What version of sass are you using? That canary version is using sass modules, which may be why sass is failing to build.

If you're using an older version, a fix may be to update sass.

DimaChaichan commented 4 years ago

What version of sass are you using? That canary version is using sass modules, which may be why sass is failing to build.

If you're using an older version, a fix may be to update sass.

Hi AsyncLiz, thanks for your message.

I use the Version sass@1.25.1-test.1. This is the last version on NPM.

abraham commented 4 years ago

I was getting

ERROR in ./src/frontend/sass/main.scss Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;" on line 24 of node_modules/@material/button/mdc-button.scss

and fixed it by removing node-sass and installing sass@1.25.0.

jamiddd commented 4 years ago

I was getting

ERROR in ./src/frontend/sass/main.scss Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;" on line 24 of node_modules/@material/button/mdc-button.scss

and fixed it by removing node-sass and installing sass@1.25.0.

It worked .. Thanks

alcarazzam commented 4 years ago

Hi @abraham

and fixed it by removing node-sass and installing sass@1.25.0.

I get this error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Two forwarded modules both define a variable named $mdc-feature-mdc-feature-all-features.
  ╷
2 │ @forward "@material/feature-targeting/variables" as mdc-feature-*;
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original @forward
3 │ @forward "@material/feature-targeting/mixins" as mdc-feature-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
  ╵
  node_modules/@material/card/mdc-card.import.scss 3:1  @import
KolCrooks commented 4 years ago

@m-alzam same

sitterrus commented 4 years ago

@m-alzam same

Hi @abraham

and fixed it by removing node-sass and installing sass@1.25.0.

I get this error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Two forwarded modules both define a variable named $mdc-feature-mdc-feature-all-features.
  ╷
2 │ @forward "@material/feature-targeting/variables" as mdc-feature-*;
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original @forward
3 │ @forward "@material/feature-targeting/mixins" as mdc-feature-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
  ╵
  node_modules/@material/card/mdc-card.import.scss 3:1  @import

here is temporary solution: https://github.com/webpack-contrib/sass-loader/issues/804#issuecomment-586095020

jkaan commented 4 years ago

I indeed have the same error and when I add the workaround it complains that it cannot find the stylesheet.

abhiomkar commented 4 years ago

I created full working example with some of the popular bundlers: Webpack, Rollup & Snowpack.

sitterrus commented 4 years ago

I indeed have the same error and when I add the workaround it complains that it cannot find the stylesheet.

if you see the following image it means that the package is not installed

wazest commented 4 years ago

I was getting

ERROR in ./src/frontend/sass/main.scss Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;" on line 24 of node_modules/@material/button/mdc-button.scss

and fixed it by removing node-sass and installing sass@1.25.0.

Hi @abraham

I get the same Error ...

ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@forward "@material/animation/variables" as mdc-animation-; ^ @forward is coming soon, but it's not supported in this version of Dart Sass. ╷ 1 │ @forward "@material/animation/variables" as mdc-animation-;

Any solution?

asyncLiz commented 4 years ago

CSS modules require sass@^1.23.0. Make sure you're on that version or later to use them.

If you're using sass-loader it will automatically use sass, but you'll need to make sure any traces of node-sass have been fully removed from the project.

If you're continuing to have problems, create a reproduction repository with your package.json and package-lock.json.

raythurnvoid commented 4 years ago

@m-alzam same

Hi @abraham

and fixed it by removing node-sass and installing sass@1.25.0.

I get this error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Two forwarded modules both define a variable named $mdc-feature-mdc-feature-all-features.
  ╷
2 │ @forward "@material/feature-targeting/variables" as mdc-feature-*;
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original @forward
3 │ @forward "@material/feature-targeting/mixins" as mdc-feature-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
  ╵
  node_modules/@material/card/mdc-card.import.scss 3:1  @import

here is temporary solution: webpack-contrib/sass-loader#804 (comment)

Works with sass ^1.26.10 and MDC 7.0.0

soychendo commented 2 years ago

Estuve obteniendo

ERROR en ./src/frontend/sass/main.scss Error al compilar el módulo (de ./node_modules/sass-loader/dist/cjs.js): SassError: CSS no válido después de "@includemixins": se esperaba 1 selector o regla at, era ".core-styles;" en la línea 24 de node_modules/@material/button/mdc-button.scss

y lo arregló quitando node-sasse instalando sass@1.25.0.

it worked for me just updating sass, thanks