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
CSS Modules in Vue SFC no longer supported? (v4) #1930
Comments
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
Hello @stefanzweifel, not sure if you have solved this, but I have just run into this issue. Looking at the vue loader docs here, we need to modify their example a little bit to work with laravel mix. This is what works for me:
|
@Mirago I couldn't fix this yet. Will give it a try with your code snippet. thanks! |
@Mirago Is the solution you provide also applicable for |
I have the same issue and can confirm this solution works for css only. Still searching for a working suggestion to use: |
@oroalej @DavidVaness @stefanzweifel I have since run into this issue again, and it appears that even with my previous solution, some component styles would be converted into using css modules even if they don't. I have however solved this by extending laravel mix and I use something like this - https://gist.github.com/mirago/56c8f97f9728652b2d822a411c7aa40c |
i got .webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
exclude: [
'/path/resources/sass/app.scss',
],
loaders: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:5]',
},
},
{
loader: 'sass-loader',
options: {
precision: 8,
outputStyle: 'expanded',
},
},
],
},
],
},
}) Your version looks cleaner though! thank you |
Description:
After upgrading Laravel Mix from v2 to v4 it seems CSS Modules in Vue Single File Components is no longer supported (
<style module>
).The migration Guide for
vue-loader
mentions that CSS modules now has to be explicitly configured in thecss-loader
.I've got CSS modules to work with the following config addition:
However, all styles are now converted to CSS modules (doesn't matter if
<style>
or<style module>
; some third-party components which just use normal CSS classes, no longer work correctly and break our project).To fix this, the migration guide mentions, that I would have to add a
oneOf
-rule with aresourceQuery
to my webpack config. However this doesn't seem to work with Laravel Mix (see "Build Error").📝 Build Error
My main question here is:
I'm grateful for any feedback which could guide me to a working solution here 😅.
Steps To Reproduce:
I've created a repository with an example app here. Checkout the
master
branch and opendist/index.html
in a browser to see a working example. Checkout theexample-mix-4
-branch and opendist/index.html
to see a failing example.Example.vue
).Example.vue
.Expected:
Result:
The text was updated successfully, but these errors were encountered: