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
[Question]Will Webpack support CSS module scripts? #14063
Comments
Yes, we want to support that, but no plans have been made to implement it yet |
We can improve css-loader and have the same behavior |
@AkifumiSato Anyway what is the problem with |
Import results are different for // CSS module scripts
import sheet from './styles.css' assert { type: 'css' };
console.log(sheet instanceof CSSStyleSheet) // true
// with css-loader
import sheet from './styles.css';
console.log(sheet instanceof CSSStyleSheet) // false, `sheet` is Record<string, string>. My understanding is that if you import it with /* index.css */
.title {
font-size: 20px;
} import React from 'react'
import styles from './index.css' assert { type: 'css' }
export const Title: React.FC = ({ children }) => (
// `styles.title` is undefined.
<h1 className={styles.title}>{children}</h1>
) |
hm, we can fix it, if |
And you can use classes as named export https://github.com/webpack-contrib/css-loader#namedexport |
With the support of |
Yep, we can improve this too, it is not hard, I will think how better to do it |
@alexander-akait thx a lot! |
Yep, first we improve css-loader, then in future we will move logic inside webpack core |
module.rules: [ {
test: /\.css$/,
oneOf: [
{ assert: { type: "css" }, loader: "css-loader", options: { exportStylesheet: true } },
{ loader: "css-loader", options: { exportStylesheet: false } }
]
} ] Assuming css-loader supports exportStylesheet, which it currently don't |
@alexander-akait It looks like the fix is complete, should I close the Issue? |
@AkifumiSato Not fully finished |
This issue had no activity for at least three months. It's subject to automatic issue closing if there is no activity in the next 15 days. |
bump |
Issue was closed because of inactivity. If you think this is still a valid issue, please file a new issue with additional information. |
let's close in favor #14893 |
It seems that Chrome implements
CSS module scripts
which imports CSS using import assertion.https://web.dev/css-module-scripts/
This seems to have different specifications than when using css-loader.
I'm wondering if I need to be aware of the difference between css-loader and
CSS module scripts
in the future.Are there any plans to support this on the Webpack side?
Is this a problem that another library should address?
The text was updated successfully, but these errors were encountered: